| 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(); |
| } |
| }); |
| }; |