/trunk/widget/modules/manager/squelettes/js/utils.js |
---|
New file |
0,0 → 1,96 |
export const findFieldset = fieldIndex => $(`fieldset.new-field[data-id=${fieldIndex}]`); |
// effet d'affichage |
export const showField = $field => $field.hide().show(200); |
export const hideNRemove = ($element, $elemenToRemove = $element) => $element.hide(200, () => { |
$elemenToRemove.remove(); |
}); |
// JSON.stringify : Gestion des apostrophes dans les valeurs : |
export const replacer = (key, value) => { |
if ('fieldValues' === key && 'object' === typeof value) { |
for (let 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; |
} |
/** |
* 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 valeurOk = ( |
valeur, |
sensComparaison = true, |
comparer = undefined |
) => { |
let 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 (retour && 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; |
} |
}; |
export const potDeMiel = () => { |
const $submit = $('#signup_submit'); |
if (!valeurOk($('#basic-widget-form #email').val())) { |
$submit.prop('disabled', false); |
} |
$submit.off().on('click dblclick mousedown submit focus keydown keypress keyup touchstart touchend', () => { |
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(); |
}); |
$submit.prop('disabled', true); |
} |
}); |
}; |
/trunk/widget/modules/manager/squelettes/js/preview.js |
---|
New file |
0,0 → 1,750 |
import {findFieldset} from './utils.js'; |
// Variable permettant un seul affichage du titre |
// de la prévisualisation pour les nouveaux champs |
let firstClick = true; |
/************************************************ |
* Fonction d'affichage des champs classiques * |
************************************************/ |
// Prévisualisation |
export const 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').on('change', evt => { |
if (!$.isEmptyObject(evt.target.files[0])) { |
$('.widget-renderer').css('background' ,`url(${URL.createObjectURL(evt.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 |
const renderFields = ($source, $taget) => { |
let text = new DOMParser().parseFromString($source.val(), 'text/html'); |
text = text.body.textContent || ''; |
if ($source.val()) { |
$taget.text(text); |
} |
$source.on('change', () => $taget.text(text)); |
} |
/***************************************************** |
* Fonction d'affichage des champs supplémentaires * |
*****************************************************/ |
// Prévisualisation des nouveaux champs |
export const newFieldsPreview = function() { |
const count = $('fieldset').last().data('id'); |
let $thisFieldset; |
// 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(let index = $('fieldset').first().data('id'); index <= count; index++) { |
$thisFieldset = findFieldset(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; |
}; |
// Construction des éléments à visualiser |
const onClickPreviewField = (thisFieldset, index) => { |
// Récupération des données |
const fieldKey = $('.field-key' , thisFieldset).val() || '',//clé |
fieldElement = $('.field-element' , thisFieldset).val() || '',//élément |
// 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 |
let fieldLabel = $('.field-name' , thisFieldset).val() || '',//nom |
fieldTooltip = $('.field-description' , thisFieldset).val() || '',//info-bulle |
fieldPlaceholder = $('.aide-saisie' , thisFieldset).val() || '';//placeholder |
// Variables d'affichage |
const count = fieldOptions.length,//nombre d'options, pour les boucles for |
replaceQuotes = text => text.replace(/(')/gm, ''').replace(/(")/gm, '"'); |
let fieldHtml = '',//variable contenant tout le html à afficher |
fieldOption; |
// réafficher les apostrophes |
$.each([fieldLabel,fieldTooltip,fieldPlaceholder], (i,fieldValue) => replaceQuotes(fieldValue)); |
//valeurs initiales des chaînes de caractères |
//Éléments simples ou chaînes communes aux "listes" |
let commonFieldsHtml = {//Éléments simples ou chaînes communes aux "listes" |
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.) |
let listFieldsHtml = {//chaînes & html spécifiques aux listes |
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 ($('.field-is_mandatory', thisFieldset).is(':checked')) { |
// 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 ('' !== $('.file-return.help-doc-'+index).text()) { |
// 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++) { |
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="'+replaceQuotes(fieldOption.optionValue)+ |
// Checked |
listFieldsHtml.defaultAttr+ |
// Class="nom du champ" |
commonFieldsHtml.fieldInput.classAttr+ |
'>'+ |
// Label de l'option |
replaceQuotes(fieldOption.optionText)+ |
'</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++) { |
fieldOption = fieldOptions[i]; |
// Type="checkbox" |
commonFieldsHtml.fieldInput.typeAttr = ' type="checkbox"'; |
// Id |
listFieldsHtml.inputIdAttr = ' id="'+replaceQuotes(fieldOption.optionValue).toLowerCase()+'"'; |
// For |
listFieldsHtml.forAttr = ' for="'+replaceQuotes(fieldOption.optionValue).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="'+replaceQuotes(fieldOption.optionValue)+'"'+ |
// Checked |
listFieldsHtml.defaultAttr+ |
// Class="nom du champ" |
commonFieldsHtml.fieldInput.classAttr+ |
// DataId |
commonFieldsHtml.dataIdAttr+ |
'>'+ |
// Label de l'option |
replaceQuotes(fieldOption.optionText)+ |
'</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++) { |
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="'+replaceQuotes(fieldOption.optionValue)+'"'+ |
// Value-id |
listFieldsHtml.optionIdAttr+ |
// Selected |
listFieldsHtml.defaultAttr+ |
'>'+ |
// Option |
replaceQuotes(fieldOption.optionText)+ |
'</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 |
const collectListOptions = thisFieldset => { |
const $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" |
const onOtherOption = ($thisFieldset , index) => { |
// L'élément choisi |
const element = $('.field-element', $thisFieldset).val(), |
thisPreviewFieldset = $(`.preview-fields[data-id=${index}]`), |
// 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>`, |
hasCheckboxes = ['list-checkbox','checkbox'].includes(element), |
eventType = hasCheckboxes ? 'click' : 'change'; |
let fieldSelector = 'input'; |
if('select' === element) { |
fieldSelector = 'select'; |
} else if (hasCheckboxes) { |
fieldSelector += `#other-${element}-${index}`; |
} |
const $field = $(fieldSelector, thisPreviewFieldset); |
$field.on(eventType, function() { |
const hasOtherOption = hasCheckboxes ? ($field.is(':checked')) : ('other' === $field.val()); |
if (hasOtherOption) { |
// Insertion du champ "Autre" après les boutons |
if ('list-checkbox' === element) { |
$('.checkboxes', thisPreviewFieldset).append(collectOther); |
} else { |
$('.'+element, thisPreviewFieldset).after(collectOther); |
} |
} else { |
// Suppression du champ autre |
$('.collect-other-block', thisPreviewFieldset).remove(); |
} |
}); |
}; |
/trunk/widget/modules/manager/squelettes/js/ChampsSupp.js |
---|
New file |
0,0 → 1,728 |
import {inputFile} from './display.js'; |
import {findFieldset, showField, hideNRemove, replacer, valeurOk} from './utils.js'; |
import {newFieldsPreview} from './preview.js'; |
import {onChangeCheckKeyUnique, missingValuesClass} from './validation.js'; |
// Tableau d'envoi des données |
const datasToSubmit = [], |
datePattern = '(^(((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)$)', |
isModification = Array.isArray(CHAMPS_SUPP_JSON) && 0 < CHAMPS_SUPP_JSON.length; |
/** |
* ChampsSupp |
*/ |
export function ChampsSupp() { |
this.fieldIndex = -1; |
} |
ChampsSupp.prototype.init = function() { |
// Ajout de nouveaux champs |
$('#add-fields').on('click', this.onClickAddNewFields.bind(this)); |
// Activation/Desactivation des boutons valider et prévisualiser |
this.onClickButtonsTagMissingValues(); |
// Activer la checkbox de valeur par default uniquement si une valeur est entrée |
this.onInputListValueLabelEnableDefaultCheckbox(); |
// Modifications |
this.onExtentedFieldsForModification(); |
}; |
/*********************************************************** |
* Fonctions pour la création des champs supplémentaires * |
***********************************************************/ |
// Logique globale pour l'ajout de nouveaux champs |
ChampsSupp.prototype.onClickAddNewFields = function() { |
this.fieldIndex++; |
this.dataIdAttr = `data-id="${this.fieldIndex}"`; |
// Affichage du formulaire pour un champ |
this.displayNewField(); |
// Affichage du nom du champ |
this.onChangeDisplayFieldLabel(); |
// 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 |
this.onChangeFieldTypeCollectDetails(); |
// Suppression d'un champ |
this.onClickRemoveField(); |
}; |
// Création/affichage du formulaire d'un nouveau champ |
ChampsSupp.prototype.displayNewField = function() { |
const fieldsetHtml = `<fieldset ${this.dataIdAttr} class="new-field"></fieldset>`, |
fieldsetHtmlContent = |
`<h3>Nouveau champ :<br><strong class="field-title" ${this.dataIdAttr}></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" ${this.dataIdAttr} 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" ${this.dataIdAttr} 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" ${this.dataIdAttr}> |
<label for="field-element" title="Quel type de champ">Type de champ *</label> |
<select name="field-element" ${this.dataIdAttr} 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" ${this.dataIdAttr} 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" ${this.dataIdAttr} 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" ${this.dataIdAttr} 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${this.fieldIndex}" ${this.dataIdAttr} id="help-doc-${this.fieldIndex}" accept="image/*"> |
<label for="field-help${this.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" ${this.dataIdAttr} title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div> |
<div class="file-return help-doc-${this.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" ${this.dataIdAttr} title="Supprimer un champ"><i class="fa fa-skull" aria-hidden="true"></i></div> |
</div> |
<input type="hidden" name="field-is_visible" class="field-is_visible" ${this.dataIdAttr} value="1"> |
</div>`; |
$('#new-fields').append(fieldsetHtml); |
const $fieldset = findFieldset(this.fieldIndex); |
// Insertion du contenu html du formulaire du nouveaux champs inséré dans le dom |
$fieldset.append(fieldsetHtmlContent); |
// Animation de l'affichage |
if (!isModification) { |
showField($fieldset); |
$('html, body').stop().animate({ |
scrollTop: $fieldset.offset().top |
}, 300); |
} |
this.$fieldset = $fieldset; |
}; |
// Affichage du nom du champ dès qu'il est renseigné |
ChampsSupp.prototype.onChangeDisplayFieldLabel = function() { |
const $fieldset = this.$fieldset; |
$('.field-name', $fieldset).on('change', function () { |
$('.field-title', $fieldset).text($(this).val()); |
}); |
}; |
// Supprimer un nouveau champ |
ChampsSupp.prototype.onClickRemoveField = function() { |
$('.remove-field').click(function () { |
const $fieldset = $(this).closest('fieldset'), |
fieldIndex = $fieldset.data('id'); |
$fieldset.hide(200, function () { |
if (!CHAMPS_SUPP_JSON[fieldIndex]) { |
$fieldset.remove(); |
} else { |
if (0 === $('#info-suppression-champs-supp').length) { |
$('#infos-validation-boutons').after( |
`<p id="info-suppression-champs-supp" class="message invalid"> |
<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> |
vous avez supprimé un ou plusieurs champs supplémentaires ici<br> |
Lorsque vous aurez fini de saisir/modifier/supprimer vos champs suppléménetaires, pensez à cliquer sur le bouton <i class="fa fa-bolt" aria-hidden="true" style="color:#B3C954"></i> "Valider", même si vous les avez tous supprimés, sans quoi ces changements ne seront pas pris en compte. |
</p>` |
); |
} |
$('.field-is_visible', $fieldset).val(0); |
} |
}); |
}); |
}; |
/**** 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 |
ChampsSupp.prototype.onChangeFieldTypeCollectDetails = function() { |
const lthis = this, |
placeholderFieldHtml = |
`<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" ${this.dataIdAttr} class="aide-saisie form-control" placeholder="Ce que doit contenir ce champ"> |
</div>`, |
$element = $('.field-element', this.$fieldset); |
// On insère les champs par défaut de recueil d'informations |
this.displayFieldDetailsCollect(placeholderFieldHtml); |
// Sinon : |
$element.on('change', function() { |
const selectedItem = this.value; |
// On intialise l'index pour les listes la variable qui contiendra un id pour chaque option |
let valueIndex = 0, |
fieldDetails = placeholderFieldHtml; |
// 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 |
hideNRemove($('.field-details', lthis.$fieldset)); |
// Html de recueil de données en fonction de l'élément choisi |
switch(selectedItem) { |
case 'range': |
case 'number': |
fieldDetails = |
`<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 --> |
${placeholderFieldHtml} |
<!-- 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" ${lthis.dataIdAttr} 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" ${lthis.dataIdAttr} 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" ${lthis.dataIdAttr} 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" ${lthis.dataIdAttr} class="max form-control" step="0.01" value="1" lang="en"> |
</div>`; |
break; |
case 'date': |
fieldDetails = |
`<!-- Date min --> |
<div class="col-sm-12 mt-3"> |
<label for="min" title="date min">Date minimale</label> |
<input type="date" name="min" ${lthis.dataIdAttr} class="min form-control" pattern="${datePattern}" 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" ${lthis.dataIdAttr} class="max form-control" pattern="${datePattern}" title="jj/mm/aaaa"> |
</div>`; |
break; |
case 'select': |
case 'checkbox': |
case 'list-checkbox': |
case 'radio': |
const mayHavePlaceholder = ['select', 'list-checkbox'].includes(selectedItem); |
let additionnalMessage = '', |
required = 'required', |
asterisk = ' *'; |
if (mayHavePlaceholder) { |
additionnalMessage = |
`<br><i class="fas fa-info-circle" style="color:#009fb8"></i> |
Si aucune valeur n’est indiquée pour la première option, |
<br>celle-ci servira de placeholder (indication affichée dans le champ), |
<br>et n’apparaitra pas dans les options à choisir/cocher. |
<br><i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> |
Dans ce cas il est impossible de choisir une "valeur par defaut"`; |
required = ''; |
asterisk = ''; |
} |
fieldDetails = |
`<p class="message element-message"> |
<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> |
Entrez au moins une valeur de ${$element.children('option:selected').text()} |
<br>Si aucun label à afficher n’est indiqué, la valeur entrée sera utilisée (première lettre en majuscule). |
${additionnalMessage} |
</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${asterisk}</label> |
<input type="text" name="list-value" ${lthis.dataIdAttr} 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" ${lthis.dataIdAttr} 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" ${lthis.dataIdAttr} class="is-defaut-value" checked="checked" 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" ${lthis.dataIdAttr}> |
<label for="add-value" class="add-value" ${lthis.dataIdAttr} title="Ajouter une valeur à la liste">Ajouter une valeur</label> |
<div class="button add-value-button" name="add-value" ${lthis.dataIdAttr} 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" ${lthis.dataIdAttr} class="option-other-value" title="Ajouter une option \"Autre\" à la fin"> |
Valeur "Autre" |
</label> |
</div>`; |
break; |
// case 'email': |
// case 'text': |
// case 'textarea': |
default: |
break; |
} |
lthis.displayFieldDetailsCollect(fieldDetails); |
// Ajout des valeurs possibles |
// lorsque le champ est une liste ou case à cocher |
lthis.onClickAddNewValueToList(valueIndex); |
}); |
}; |
// Insertion dans le dom des champs de recueil d'informations |
ChampsSupp.prototype.displayFieldDetailsCollect = function(fieldDetails) { |
const $detailsCollect = $('.add-field-select', this.$fieldset); |
$detailsCollect.after(`<div class="field-details col-sm-11 mt-3 row" ${this.dataIdAttr}>${fieldDetails}</div>`); |
showField($detailsCollect); |
}; |
/**** Ajout des valeurs (options) des "champs de listes" (select, checkbox, radio, etc.) ****/ |
// Ajout des options des listes (deroulantes, cases à cocher etc.) |
ChampsSupp.prototype.onClickAddNewValueToList = function(valueIndex) { |
const lthis = this, |
$addValueContainer = $('.add-value-container', this.$fieldset); |
$('.add-value-button', this.$fieldset).click(function() { |
valueIndex++; |
$addValueContainer.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" ${lthis.dataIdAttr} 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" ${lthis.dataIdAttr} 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" ${lthis.dataIdAttr} 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" ${lthis.dataIdAttr} 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>` |
); |
showField($addValueContainer); |
// Une seule valeur par défaut pour select et radio |
lthis.onClickDefaultValueRemoveOthers(); |
// Supprimer une valeur |
lthis.onClickRemoveListValue(); |
}); |
}; |
// Activer la checkbox de valeur par default uniquement si une valeur est entrée |
ChampsSupp.prototype.onInputListValueLabelEnableDefaultCheckbox = function() { |
$('#new-fields').on('input blur', '.list-value', function () { |
const $fieldset = findFieldset($(this).data('id')), |
$firstDefautValue = $('.is-defaut-value', $fieldset).first(); |
if ('' === $('.list-value', $fieldset).first().val()) { |
$('.is-defaut-value', $fieldset).attr('disabled', true).removeAttr('checked'); |
$firstDefautValue.attr('checked', true).prop('checked',true); |
} else { |
$('.is-defaut-value', $fieldset).each(function () { |
const $thisListValue = $(`.list-value[data-list-value-id=${$(this).data('list-value-id')}]`, $fieldset); |
if ('' !== $thisListValue.val()) { |
$(this).removeAttr('disabled'); |
} else { |
$(this).attr('disabled', true).removeAttr('checked'); |
} |
}); |
} |
}); |
}; |
// Pour les éléments "select" et "radio" il ne peut y avoir qu'une valeur par défaut cochée |
ChampsSupp.prototype.onClickDefaultValueRemoveOthers = function() { |
const lthis = this, |
selectedFieldElement = $('.field-element', this.$fieldset).val(); |
if (selectedFieldElement === 'select' || selectedFieldElement === 'radio') { |
$('.is-defaut-value', this.$fieldset).click(function () { |
if ($(this).is(':checked')) { |
// Décocher tous les autres |
$('.is-defaut-value:checked', lthis.$fieldset).not($(this)).removeAttr('checked'); |
} |
}); |
} |
}; |
// Bouton supprimer une valeur |
ChampsSupp.prototype.onClickRemoveListValue = function() { |
$('.remove-value.button', this.$fieldset).off('click').on('click', function () { |
hideNRemove($('.new-value[data-list-value-id='+$(this).data('list-value-id')+']')); |
}); |
}; |
/**** Envoi des nouveaux champs ****/ |
// Enregistrement des valeurs à transmettre |
ChampsSupp.prototype.onClickStoreNewFields = function() { |
const count = $('fieldset').last().data('id'); |
// Lorsqu'on valide |
let resultArrayIndex = 0, |
newHelpFileExists = false; |
// Savoir si au moins un fichier "aide" est enregistré |
$('.field-help').each(function () { |
if ('' !== $(this).val()){ |
newHelpFileExists = true; |
} |
}) |
// dans ce cas intégrer dans le formulaire à soumettre un bloc |
// qui contiendra une copie de chacun de ces input[type="file"] |
if (newHelpFileExists){ |
$('#submit-button').before('<div id="help-doc-submit" style="position:fixed;visibility:hidden;"></div>'); |
} |
let $thisFieldset = $('fieldset').first(), |
valueForIsVisible, |
$inputFile, |
uploadedHelpFiles; |
// On déroule les blocs de champs supplémentaires |
for(let index = $thisFieldset.data('id'); index <= count; index++) { |
$thisFieldset = findFieldset(index); |
valueForIsVisible = $('.field-is_visible', $thisFieldset).val(); |
// Certains indices peuvent correspondre à un champ supprimé |
if (0 < $($thisFieldset).length) { |
if (0 === parseInt(valueForIsVisible)) { |
datasToSubmit[resultArrayIndex] = CHAMPS_SUPP_JSON[resultArrayIndex]; |
} else { |
// initialisation du tableau de résultats |
datasToSubmit[resultArrayIndex] = {fieldValues:{}}; |
$.each(['key','name','element','unit','description'], (i, fieldName) => datasToSubmit[resultArrayIndex][fieldName] = $('.field-'+fieldName, $thisFieldset).val() || null); |
// Ajout de la valeur 'requis' ou non au tableau de resultats |
datasToSubmit[resultArrayIndex].mandatory = $('.field-is_mandatory', $thisFieldset).is(':checked'); |
// Collecte les des données dépendantes de l'élément choisi |
// sous forme d'un tableau de resultats |
this.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 |
$inputFile = $('.field-help', $thisFieldset); |
uploadedHelpFiles = $inputFile.get(0).files; |
if (0 < uploadedHelpFiles.length) { |
// Présence d'un document d'aide |
datasToSubmit[resultArrayIndex].help = uploadedHelpFiles[0].type; |
$inputFile.clone() |
.attr('name', 'help-'+datasToSubmit[resultArrayIndex].key)// l'attribut name prend la valeur de la clé |
.appendTo('#help-doc-submit'); |
// si un fichier d'aide était déjà présent et que l'utilisateur ne le supprime pas on réinjecte le type mime |
// ce qui indique la présence d'un fichier d'aide lors de l'affichage du widget de saisie |
} else if (!!CHAMPS_SUPP_JSON[resultArrayIndex] && !!CHAMPS_SUPP_JSON[resultArrayIndex]['help'] && !$('.file-return', $thisFieldset).hasClass('hidden')) { |
datasToSubmit[resultArrayIndex].help = CHAMPS_SUPP_JSON[resultArrayIndex]['help']; |
} else { |
datasToSubmit[resultArrayIndex].help = null; |
} |
datasToSubmit[resultArrayIndex].is_visible = valueForIsVisible; |
resultArrayIndex++; |
} |
} |
} |
const resultsArrayJson = JSON.stringify(datasToSubmit, replacer); |
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}">` |
); |
// suppression du message d'alerte validations des champs supprimés en mode modification |
$('#info-suppression-champs-supp').remove(); |
}; |
// Renseigne le tableau de resultat |
// pour les données dépendant de l'élément choisi |
ChampsSupp.prototype.onSelectCollectDataValuesToSubmit = function(datasToSubmitObject, $thisFieldset) { |
switch(datasToSubmitObject.element) { |
case 'select': |
case 'checkbox': |
case 'list-checkbox': |
case 'radio': |
datasToSubmitObject.fieldValues.listValue = []; |
// Ajout des valeurs de liste |
this.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; |
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 |
ChampsSupp.prototype.onChangeStoreListValueLabel = function(datasToSubmitObject, $thisFieldset) { |
const $listValues = $('.list-value', $thisFieldset), |
hasPlaceholder = !valeurOk($listValues.first().val()); |
$('.list-value', $thisFieldset).each(function (i) { |
const valueId = $(this).data('list-value-id'), |
$displayedLabel = $(`.displayed-label[data-list-value-id=${valueId}]`, $thisFieldset), |
hasDisplayedLabel = valeurOk($displayedLabel.val()); |
let displayedLabel = hasDisplayedLabel ? $displayedLabel.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', 'radio'].include($('.field-element', $thisFieldset).val())) { |
// 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]); |
} |
} else if (0 === i) {// deviendra un placeholder |
displayedLabel = hasDisplayedLabel ? $displayedLabel.val() : '...Choisir...'; |
datasToSubmitObject.fieldValues.listValue.push([null, displayedLabel]); |
} |
}); |
}; |
/********************************************************* |
* Modification des champs supp sur un Widget existant * |
*********************************************************/ |
ChampsSupp.prototype.onExtentedFieldsForModification = function() { |
if (!$('#type').val() && isModification) { |
$.each(CHAMPS_SUPP_JSON, this.fillFieldsForModification); |
} |
}; |
ChampsSupp.prototype.fillFieldsForModification = function(index, extendedFieldValues) { |
$('#add-fields').click(); |
const fieldValues = extendedFieldValues.fieldValues, |
$fieldset = findFieldset(index), |
textFields = [ |
'name', |
'key', |
'unit', |
'description' |
], |
fieldsetKeys = textFields.concat([ |
'is_visible', |
'is_mandatory', |
'element' |
]), |
extendedFields = {}; |
$.each(fieldsetKeys, (i, fieldName) => extendedFields[fieldName] = $('.field-'+fieldName, $fieldset)); |
extendedFields.is_visible.val(extendedFieldValues.is_visible); |
if (!extendedFieldValues.is_visible) { |
$fieldset.hide(); |
} |
const selectedOption = $(`option[value=${extendedFieldValues.element}]`, extendedFields.element); |
$.each(textFields, (i, fieldName) => extendedFields[fieldName].val(extendedFieldValues[fieldName])); |
const isMandatory = 1 === extendedFieldValues.mandatory; |
extendedFields.key.attr('disabled', true); |
extendedFields.name.change(); |
extendedFields.is_mandatory.attr('checked', isMandatory).prop('checked', isMandatory); |
selectedOption.attr('selected','selected'); |
selectedOption.change(); |
if (!!extendedFieldValues.help) { |
const fileExtension = 'png' === extendedFieldValues.help.replace('image/','').toLowerCase() ? '.png' : '.jpg', |
fileName = extendedFieldValues.key+fileExtension; |
$('.file-return', $fieldset).append(`${fileName}<img src="${URLS_IMAGES+fileName}" width="50%">`).removeClass('hidden'); |
} |
switch(extendedFieldValues.element) { |
case 'select': |
case 'checkbox': |
case 'list-checkbox': |
case 'radio': |
const listValues = fieldValues.listValue; |
let $listValueBlock; |
if ('other' === listValues.slice(-1)[0]) { |
$('.option-other-value', $fieldset).attr('checked', true).prop('checked', true); |
listValues.pop(); |
} |
$.each(listValues, (i, listValue) => { |
$listValueBlock = $(`.new-value[data-list-value-id=${i}]`, $fieldset); |
if(valeurOk(listValue[0])) { |
if ('#' === listValue[0].slice(-1)) { |
listValue[0] = listValue[0].slice(0,-1); |
$('.is-defaut-value', $listValueBlock).attr('checked', true).prop('checked', true); |
} |
$('.list-value', $listValueBlock).val(listValue[0]); |
} |
if(valeurOk(listValue[1])) { |
$('.displayed-label', $listValueBlock).val(listValue[1]); |
} |
$('.list-value', $listValueBlock).trigger('input'); |
if (1 < listValues.length - i) { |
$('.add-value-button', $fieldset).click(); |
} |
}); |
break; |
case 'number': |
case 'range': |
case 'date': |
case 'email': |
case 'text': |
case 'textarea': |
default: |
const specificationKeys = ['placeholder', 'default', 'step', 'min', 'max']; |
let classAttr; |
$.each(specificationKeys, (i, key) => { |
classAttr = key === 'placeholder' ? 'aide-saisie' : key; |
if (fieldValues[key] !== undefined) { |
$('.'+classAttr, $fieldset).val(fieldValues[key]); |
} |
}); |
break; |
} |
}; |
/********************************* |
* Enregistrer / prévisualiser * |
*********************************/ |
// Activation/desactivation des champs valider/previsualiser |
ChampsSupp.prototype.onClickButtonsTagMissingValues = function() { |
const lthis = this |
$('#preview-field, #validate-new-fields').on('click', function () { |
const $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 |
lthis.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(); |
} |
}); |
}; |
/trunk/widget/modules/manager/squelettes/js/display.js |
---|
New file |
0,0 → 1,159 |
import {findFieldset} from './utils.js'; |
/************************************* |
* Fonctions de Style et Affichage * |
* des éléments "spéciaux" * |
*************************************/ |
export const displayFields = () => { |
inputFile(); |
inputListCheckbox(); |
inputRangeDisplayNumber(); |
previewFieldHelpModal(); |
}; |
// Logique d'affichage pour le input type=file |
export const inputFile = () => { |
const fileInputSelector = '.input-file', |
$button = $('.label-file'), |
focusOnIntputFile = selector => $('#'+selector+fileInputSelector).focus(); |
// focus lorsque la "barre d'espace" ou "Entrée" est pressée |
$button.on('keydown', function(event) { |
if (event.keyCode == 13 || event.keyCode == 32) { |
focusOnIntputFile($(this).attr('for')); |
} |
}); |
// focus lorsque le label est cliqué |
$button.on('click', function () { |
focusOnIntputFile($(this).attr('for')); |
return false; |
}); |
// Affiche un retour visuel dès que input:file change |
$(fileInputSelector).on('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])) { |
const file = event.target.files[0], |
fileSelector = $(this).attr('id'), |
$theReturn = $('.'+fileSelector); |
// 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' !== fileSelector) { |
// Si le fichier est une image (et qu'on est pas sur "especes") on l'affiche |
// Chemin temporaire de l'image et affichage |
const tmppath = URL.createObjectURL(file); |
$theReturn.append(`<img src="${tmppath}" width="50%">`).removeClass('invalid'); |
} else if (!('especes' === fileSelector && 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' === fileSelector) {// 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 () { |
const $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 |
export const 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" |
export const inputRangeDisplayNumber = () => { |
$('#zone-appli').on('input', 'input[type="range"]', function () { |
$(this).siblings('.range-live-value').text($(this).val()); |
}); |
}; |
// Activation/Desactivation et contenu de la modale Bootstrap |
// https://getbootstrap.com/docs/3.3/javascript/#modals |
export const previewFieldHelpModal = () => { |
$('#zone-supp').on('click', '.help-button', function () { |
const index = $(this).closest('.preview-fields').data('id'), |
$thisFieldset = findFieldset(index), |
file = $('.field-help', $thisFieldset)[0].files[0], |
tmppath = URL.createObjectURL(file), |
$helpModal = $('#help-modal'), |
$helpModalLabel = $('#help-modal-label'), |
$printContent = $('#print_content'); |
// Titre |
$helpModalLabel.text('Aide pour : '+$('.field-name', $thisFieldset).val()); |
// Contenu |
if (file.type.match('image/*')) { |
$printContent.append(`<img src="${tmppath}" style="max-width:100%">`); |
} else { |
$printContent.append('<p>Erreur : le fichier n’est pas une image</p>'); |
} |
// Sortie avec la touche escape |
$helpModal.modal({keyboard: true}); |
// Affichage |
$helpModal.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 |
$helpModal.on('shown.bs.modal', function () { |
$('#myInput').trigger('focus'); |
}) |
// Réinitialisation |
$helpModal.on('hidden.bs.modal', function () { |
$helpModalLabel.text(); |
$printContent.empty(); |
}) |
}); |
}; |
/trunk/widget/modules/manager/squelettes/js/geoloc.js |
---|
New file |
0,0 → 1,140 |
import {valeurOk} from './utils.js'; |
export const initGeoloc = () => { |
onGeoloc(); |
onGeolocManuelle(); |
geolocValidationEtStockage(); |
}; |
const onGeoloc = () => { |
// Empêcher que le module carto ne bind ses events partout |
$('#tb-geolocation').on('submit blur click focus mousedown mouseleave mouseup change', '*', evt => { |
evt.preventDefault(); |
return false; |
}); |
// evenement location |
$('#tb-geolocation').on('location', location => { |
const locDatas = location.originalEvent.detail; |
if (valeurOk( locDatas )) { |
let latitude = '', |
longitude = ''; |
console.dir( locDatas ); |
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 (valeurOk( locDatas.centroid.coordinates )){ |
if (valeurOk( locDatas.centroid.coordinates[0])) { |
longitude = locDatas.centroid.coordinates[0]; |
} |
if (valeurOk( 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); |
} |
} |
}); |
} |
const onGeolocManuelle = () => { |
const coords = ['latitude','longitude','zoom']; |
$('#latitude,#longitude,#zoom').on('change', function(event) { |
const thisCoord = this.id, |
thisVal = $(this).val(); |
let 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(); |
} |
} |
}); |
} |
const geolocValidationEtStockage = () => { |
$('#signup_submit').off().on('click', event => { |
let localisation = ''; |
const latitude = $('#latitude').val(), |
longitude = $('#longitude').val(), |
zoom = $('#zoom').val(), |
$warning = $('.warning-carto'); |
if ((valeurOk(longitude) && !valeurOk(latitude)) || (!valeurOk(longitude) && valeurOk(latitude))) { |
if (!valeurOk($warning)) { |
$('#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)) { |
$warning.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); |
} |
}); |
}; |
/trunk/widget/modules/manager/squelettes/js/validation.js |
---|
New file |
0,0 → 1,136 |
import {hideNRemove} from './utils.js'; |
/********************************************* |
* Validation et envoi des nouveaux champs * |
*********************************************/ |
// Empêcher de créer plus d'une fois la même clé |
export const onChangeCheckKeyUnique = () => { |
if ( 1 < $('.field-key').length) { |
// Marqueur de valeur dupliquée |
let notUnique = false, |
thisFieldKey, |
otherFieldKey; |
$('.field-key').change(function () { |
const count = $('.field-key').length; |
for(let index = 0; index < count; index++) { |
thisFieldKey = $(`.field-key[data-id="${index}"]`); |
// Le champ avec cet index pourrait avoir été supprimé |
if (0 < thisFieldKey.length) { |
for( let otherIndex = 0; otherIndex < count; otherIndex++) { |
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() { |
hideNRemove($(this)); |
}); |
hideNRemove($('.invalid-field-key-bottom')); |
//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; |
}); |
} |
}; |
// Classe "invalid" |
export const missingValuesClass = () => { |
const $newFields = $('#new-fields'); |
// Si au moins un champ "required" n'est pas rempli |
$('input[required]', $newFields).each(function () { |
const $inputValidationWarning = $(this).next('.validation-warning'); |
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 === $inputValidationWarning.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 < $inputValidationWarning.length) { |
hideNRemove($inputValidationWarning); |
} |
} |
}); |
const $validationWarning = $newFields.next('.validation-warning'), |
$buttons = $('#preview-field , #validate-new-fields'); |
// Si on a des champs à compléter |
if (0 < $('.invalid[type="text"]').length) { |
// Les boutons sont signalés en rouge |
$buttons.addClass('invalid'); |
// Un message d'alerte apparait avant les boutons |
if (0 === $validationWarning.length) { |
$newFields.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 |
$buttons.removeClass('invalid'); |
hideNRemove($validationWarning); |
} |
}; |