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