75,6 → 75,8 |
displayNewField( fieldIndex ); |
// Affichage du nom du champ |
onChangeDisplayFieldLabel( fieldIndex ); |
// Empêcher de créer plus d'une fois la même clé |
onChangeCheckKeyUnique(); |
// Affichage des images/nom des documents importés dans les champs ajoutés |
inputFile(); |
// Recueil des informations correspondantes au nouveau champ |
339,6 → 341,67 |
* Validation et envoi des nouveaux champs * |
*********************************************/ |
|
// Empêcher de créer plus d'une fois la même clé |
function onChangeCheckKeyUnique() { |
if( 1 < $( '.field-key' ).length ) { |
let notUnique = false; |
|
$( '.field-key' ).change( function () { |
// On force le type de thisString en number pour comparer à l'index du for (plus bas) |
let thisIndex = Number( $( this ).attr( 'data-id' ) ), |
thisFieldKey = $( '.field-key[data-id="' + thisIndex + '"]' ), |
count = $( '.field-key' ).length; |
|
for(var index = 0 ; index < count ; index++) { |
let loopFieldKey = $( '.field-key[data-id="' + index + '"]' ); |
// Si cet index ne correspond pas à un champ supprimé |
// On compare la valeur avec les autres champs |
if( 0 < loopFieldKey.length && thisIndex !== index && thisFieldKey.val() === loopFieldKey.val()) { |
notUnique = true; |
} |
} |
if( notUnique ) { |
// Le champ est signalé en rouge |
thisFieldKey.addClass( 'invalid' ); |
// Un message d'alerte apparait sous le champ |
if( 0 === $( '.invalid-field-key[data-id="' + thisIndex + '"]' ).length ) { |
thisFieldKey.after( |
'<p class="message invalid-field-key" data-id="' + thisIndex + '">' + |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' + |
' Vous avez déjà utilisé cette clé!' + |
'</p>' |
); |
} |
// Un message d'alerte apparait au dessus des boutons prévisualiser/valider |
if( 0 === $( '.invalid-field-key-bottom' ).length ) { |
$( '#new-fields' ).append( |
'<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' ).css( 'pointer-events', 'none' ); |
// Si on est ok on retire toutes les alertes |
} else { |
thisFieldKey.removeClass( 'invalid' ); |
$( '#preview-field , #validate-new-fields' ).removeClass( 'invalid' ); |
$( '.invalid-field-key[data-id="' + thisIndex + '"]' ).hide( 200 , function () { |
$( this ).remove(); |
}); |
$( '.invalid-field-key-bottom' ).hide( 200 , function () { |
$( this ).remove(); |
}); |
$( '#preview-field' )[0].style.removeProperty( 'pointer-events' ); |
$( '#validate-new-fields' )[0].style.removeProperty( 'pointer-events' ) |
} |
// Réinitialisation |
notUnique = false; |
}); |
} |
} |
|
//Activation/Désactivation des boutons valider/prévisualiser |
function activatePreviewAndValidateButtons() { |
var invalidElementInfos = false, // true si aucune option n'a été entrée pour un élément de liste (select, radio, etc.) |
465,23 → 528,13 |
// Recueil de l'élément choisi pour le tableau de resultats |
datasToSubmit[ resultArrayIndex ].element = $( '.field-element' , thisFieldset ).val(); |
// Ajout de la valeur 'requis' ou non au tableau de resultats |
datasToSubmit[ resultArrayIndex ].mandatory = false; |
// Ajout de "champ requis" |
if( $( '.field-is_mandatory' , thisFieldset ).is( ':checked' ) ) { |
datasToSubmit[ resultArrayIndex ].mandatory = true; |
} |
datasToSubmit[ resultArrayIndex ].mandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' ); |
// Ajout de l'unité au tableau de resultats |
if ( $( '.field-unit' , thisFieldset ).val() ) { |
datasToSubmit[ resultArrayIndex ].unit = $( '.field-unit' , thisFieldset ).val(); |
} |
datasToSubmit[ resultArrayIndex ].unit = $( '.field-unit' , thisFieldset ).val() || null; |
// Ajout du tooltip au tableau de resultats |
if ( $( '.field-description' , thisFieldset ).val() ) { |
datasToSubmit[ resultArrayIndex ].description = $( '.field-description' , thisFieldset ).val(); |
} |
datasToSubmit[ resultArrayIndex ].description = $( '.field-description' , thisFieldset ).val() || null; |
// Ajout du nom du document d'aide au tableau de resultats |
if ( $('.file-return.help-doc-' + index ).text() ) { |
datasToSubmit[ resultArrayIndex ].help = $( '.file-return.help-doc-' + index ).text(); |
} |
datasToSubmit[ resultArrayIndex ].help = $( '.file-return.help-doc-' + index ).text() || null; |
// Collecte les des données dépendantes de l'élément choisi |
// sous forme d'un tableau de resultats |
onSelectCollectDataValuesToSubmit( datasToSubmit[ resultArrayIndex ] , thisFieldset ); |
536,36 → 589,22 |
case 'number': |
case 'range': |
// Placeholder |
if( $( '.aide-saisie' , thisFieldset ).val() ) { |
datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val(); |
} |
datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null; |
// Valeur par défaut |
if( $( '.default' , thisFieldset ).val() ) { |
datasToSubmitObject.fieldValues.default = $( '.default' , thisFieldset ).val(); |
} |
datasToSubmitObject.fieldValues.default = $( '.default' , thisFieldset ).val() || null; |
// Incrémentation ( attribut step="" ) |
if( $( '.step' , thisFieldset ).val() ) { |
datasToSubmitObject.fieldValues.step = $( '.step' , thisFieldset ).val(); |
} |
datasToSubmitObject.fieldValues.step = $( '.step' , thisFieldset ).val() || null; |
// Min |
if( $( '.min' , thisFieldset ).val() ) { |
datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val(); |
} |
datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null; |
// Max |
if( $( '.max' , thisFieldset ).val() ) { |
datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val(); |
} |
datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null; |
break; |
|
case 'date': |
// Min |
if( $( '.min' , thisFieldset ).val() ) { |
datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val(); |
} |
datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null; |
// Max |
if( $( '.max' , thisFieldset ).val() ) { |
datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val(); |
} |
datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null; |
break; |
|
case 'email': |
573,9 → 612,7 |
case 'textarea': |
default: |
// Placeholder |
if( $( '.aide-saisie' , thisFieldset ).val() ) { |
datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val(); |
} |
datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null; |
break; |
} |
return datasToSubmitObject; |
586,12 → 623,18 |
function onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset ) { |
$( '.list-value' , thisFieldset ).each( function() { |
var selectedFieldElement = $( '.field-element' , thisFieldset ).val(); |
|
if( $( this ).val() ){ |
// Is-default-value non cochée |
if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).attr('data-list-value-id') + '"]' , thisFieldset ).attr( 'checked' ) ) { |
datasToSubmitObject.fieldValues.listValue.push( $( this ).val() ); |
// Is-default-value cochée pour select/radio |
} else if( 'select' === selectedFieldElement || 'radio' === selectedFieldElement ) { |
// Une seule valeur par defaut, devient la première valeur du tableau + '#' |
datasToSubmitObject.fieldValues.listValue.unshift( $( this ).val() + '#' ); |
// Is-default-value cochée pour checkbox/list-checkbox |
} else { |
// On ajoute simplement la valeur au tableau + '#' |
datasToSubmitObject.fieldValues.listValue.push( $( this ).val() + '#' ); |
} |
} |
602,18 → 645,7 |
* Fonction d'affichage des champs classiques * |
************************************************/ |
|
// Affichage des infos dès que disponibles |
// pour les champs classiques |
function renderFields( $source , $taget ) { |
|
if($source.val()) { |
$taget.text( $source.val() ); |
} |
$source.change( function () { |
$taget.text( $( this ).val() ); |
}); |
} |
|
// Prévisualisation |
function DisplayClassicFields() { |
// Affichage du titre du widget |
renderFields( $('#titre') , $( '.widget-renderer h1' ) ); |
622,16 → 654,17 |
// Affichage de la description |
renderFields( $('#description') , $( '.preview-description' ) ); |
// Affichage du logo s'il existe déjà |
if( $('#logo').val() ) { |
$( '#preview-logo' ).prop( 'src' , $( '#group-settings-form .logo img' ).prop('src') ); |
if( $('#logo').val() || $('#logo')[0].defaultValue ) { |
$( '#preview-logo img' ).prop( 'src' , $( '#group-settings-form .logo img' ).prop('src') ); |
} |
// Affichage du logo chargé |
$( '#logo.input-file' ).change( function( event ) { |
|
if( !$.isEmptyObject( event.target.files[0] ) ) { |
// Si le 'change' était pas une suppression |
if( $.isEmptyObject( event.target.files[0] ) ) { |
$( '#preview-logo img' ).prop( 'src' , '' ); |
// Si on a chargé un logo ou changé le fichier |
} else { |
$( '#preview-logo img' ).prop( 'src' , URL.createObjectURL( event.target.files[0] ) ); |
} else { |
$( '#preview-logo img' ).prop( 'src' , '' ); |
} |
}); |
// Affichage de l'image de fond |
644,192 → 677,192 |
}); |
} |
|
// Affichage des infos dès que disponibles |
// pour les champs classiques |
function renderFields( $source , $taget ) { |
if($source.val()) { |
$taget.text( $source.val() ); |
} |
$source.change( function () { |
$taget.text( $( this ).val() ); |
}); |
} |
|
// /***************************************************** |
// * Fonction d'affichage des champs supplémentaires * |
// *****************************************************/ |
|
/***************************************************** |
* Fonction d'affichage des champs supplémentaires * |
*****************************************************/ |
|
// Construction des éléments à visualiser |
function onClickPreviewField( thisFieldset , index ) { |
|
var fieldLabel = $( '.field-name' , thisFieldset ).val(), |
fieldKey = $( '.field-key' , thisFieldset ).val(), |
fieldElement = $( '.field-element' , thisFieldset ).val(), |
fieldIsMandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' ), |
fieldUnit = $( '.field-unit' , thisFieldset ).val(), |
fieldTooltip = $( '.field-description' , thisFieldset ).val(), |
fieldHelp = $( '.file-return.help-doc-' + index ).text(), |
fieldPlaceholder = $( '.aide-saisie' , thisFieldset ).val() || '', |
fieldDefaultNum = $( '.default' , thisFieldset ).val(), |
// Récupération des données |
// Tous les champs |
var fieldLabel = $( '.field-name' , thisFieldset ).val(),//nom |
fieldKey = $( '.field-key' , thisFieldset ).val(),//clé |
fieldElement = $( '.field-element' , thisFieldset ).val(),//élément |
fieldIsMandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' ),//champ requis |
fieldUnit = $( '.field-unit' , thisFieldset ).val(),//unités |
fieldTooltip = $( '.field-description' , thisFieldset ).val(),//info-bulle |
fieldHelp = $( '.file-return.help-doc-' + index ).text(),//nom du fichier d'aide |
fieldPlaceholder = $( '.aide-saisie' , thisFieldset ).val() || '',//placeholder |
// Champs à valeur numérique ou date |
fieldStep = $( '.step' , thisFieldset ).val(), |
fieldMin = $( '.min' , thisFieldset ).val(), |
fieldMax = $( '.max' , thisFieldset ).val(), |
fieldOtherValue = $( '.option-other-value' , thisFieldset ).is( ':checked' ), |
fieldOptions = collectListOptions( thisFieldset ); |
|
|
|
var fieldHtmlObject = {}, |
fieldHtml = '', |
constHtml = {}, |
listHtml = {}, |
count = fieldOptions.length, |
fieldHelpClass = ''; |
|
// Pour les éléments simples |
fieldHtmlObject = { |
fieldHelpButton : '', |
fieldTitleAttr : '', |
fieldLabel : { |
labelForAttr :' for="' + fieldKey + '"', |
labelClassAttr :'', |
labelOtherAttr : '', |
labelContent : fieldLabel |
// Champs "listes" |
fieldDefaultNum = $( '.default' , thisFieldset ).val(),//option pas default |
fieldOtherValue = $( '.option-other-value' , thisFieldset ).is( ':checked' ),//option autre |
fieldOptions = collectListOptions( thisFieldset );//Array: toutes les options |
// Variables d'affichage |
var fieldHtml = '',//variable contenant tout le html à afficher |
commonFieldsHtml = {},//Éléments simples ou chaînes communes aux "listes" |
listFieldsHtml = {},//chaînes & html pour les listes mais non spécifiques |
listFieldsHtml = {},//chaînes & html spécifiques aux listes |
count = fieldOptions.length;//nombre d'options, pour les boucles for |
//valeurs initiales des chaînes de caractères |
//Éléments simples ou chaînes communes aux "listes" |
commonFieldsHtml = { |
dataIdAttr : ' data-id="' + index + '"', |
helpButton : '',//bouton aide |
helpClass : '',//classe de l'élément associé au bouton aide |
titleAttr : '',//info-bulle |
fieldInput : {//attributs de l'élément |
typeAttr : ' type="' + fieldElement + '"', |
nameAttr : ' name="' + fieldKey + '"', |
classAttr : ' class="' + fieldKey + '"', |
placeholderAttr : '', |
mandatoryAttr : '',//required |
otherAttr : '' |
}, |
fieldInput : { |
inputTypeAttr : ' type="' + fieldElement + '"', |
inputNameAttr : ' name="' + fieldKey + '"', |
inputDataIdAttr : ' data-id="' + index + '"', |
inputClassAttr : ' class="' + fieldKey + '"', |
inputPlaceholderAttr : '', |
inputOtherAttr : '' |
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.) |
constHtml = { |
fieldContainerContent : fieldLabel, |
fieldDataIdAttr : ' data-id="' + index + '"', |
fieldTitleAttr : '', |
fieldMandatoryAttr : '', |
fieldContainerClass : '' |
listFieldsHtml = { |
containerContent : fieldLabel,//les options peuvent avoir chacune un label |
containerClass : '',//une classe pour le conteneur |
forAttr : '',//correspond à l'id d'une checkbox/radio/list-checkbox |
optionIdAttr : '',//value-id |
defaultAttr : ''//default |
}; |
|
listHtml = { |
optionLabel : {}, |
optionInput : { |
inputTypeAttr : ' type="' + fieldElement + '"', |
inputNameAttr : ' name="' + fieldKey + '"', |
inputClassAttr : ' class="' + fieldKey + '"', |
inputOptionIdAttr : '' |
} |
}; |
|
// 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(); |
} |
|
// Si l'élément est requis |
// Élément requis |
if( fieldIsMandatory ) { |
// Attribut required |
fieldHtmlObject.fieldInput.inputOtherAttr += ' required="required"'; |
// Attribut required pour le listes |
commonFieldsHtml.fieldInput.mandatoryAttr = ' required="required"'; |
// Nom du champ (éléments listes) |
constHtml.fieldContainerContent += ' *'; |
listFieldsHtml.containerContent += ' *'; |
// Nom du champ (éléments simples) |
fieldHtmlObject.fieldLabel.labelContent += ' *'; |
commonFieldsHtml.fieldLabel.labelContent += ' *'; |
} |
|
// Si on a une infobulle |
// Infobulle |
if( '' !== fieldTooltip ) { |
fieldHtmlObject.fieldTitleAttr = ' title="' + fieldTooltip + '"'; |
commonFieldsHtml.titleAttr = ' title="' + fieldTooltip + '"'; |
} |
|
// Si on a un placeholder |
// Placeholder |
if( '' !== fieldPlaceholder ) { |
fieldHtmlObject.fieldInput.inputPlaceholderAttr = ' placeholder="' + fieldPlaceholder + '"'; |
console.log(fieldPlaceholder); |
commonFieldsHtml.fieldInput.placeholderAttr = ' placeholder="' + fieldPlaceholder + '"'; |
} |
|
// Fichier d'aide |
if( '' !== fieldHelp ) { |
fieldHtmlObject.fieldHelpButton = '<div class="button help-button"><i class="fas fa-info-circle"></i></div>'; |
fieldHelpClass = ' and-help'; |
// Bouton 'aide' |
commonFieldsHtml.helpButton = '<div class="button help-button"><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' : |
constHtml.fieldContainerClass = ' class="' + fieldElement +'"'; |
listFieldsHtml.containerClass = ' class="' + fieldElement +'"'; |
fieldHtml = |
// Conteneur |
'<div' + |
// Class="L'élément choisi" |
constHtml.fieldContainerClass + |
listFieldsHtml.containerClass + |
// DataId |
constHtml.fieldDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
// Required |
constHtml.fieldMandatoryAttr + |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// Info bulle |
constHtml.fieldTitleAttr + |
commonFieldsHtml.titleAttr + |
' >'+ |
// Nom du champ |
'<div class="list-label' + fieldHelpClass + '">' + |
constHtml.fieldContainerContent + |
// Classe 'and-help' |
'<div class="list-label' + commonFieldsHtml.helpClass + '">' + |
// Label |
listFieldsHtml.containerContent + |
'</div>' + |
fieldHtmlObject.fieldHelpButton; |
// Bouton 'help' |
commonFieldsHtml.helpButton; |
// On déroule les différentes valeurs |
for ( let i = 0; i < count; i++ ) { |
let fieldOption = fieldOptions[i]; |
|
listHtml.optionInput.inputDefaultAttr = ''; |
listHtml.optionInput.inputIdAttr = ' id="' + fieldOption.optionValue + '"'; |
listHtml.optionLabel.labelForAttr = ' for="' + fieldOption.optionValue + '"'; |
|
// Si c'est une/l'option par défaut |
if( fieldOption.isDefault ) { |
listHtml.optionInput.inputDefaultAttr = ' checked'; |
// 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 ) { |
listHtml.optionInput.inputOptionIdAttr = ' value-id="' + fieldOption.optionIndex + '"'; |
listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"'; |
} |
|
fieldHtml += |
'<label' + |
// For |
listHtml.optionLabel.labelForAttr + |
listFieldsHtml.forAttr + |
// value-id |
listHtml.optionInput.inputOptionIdAttr + |
listFieldsHtml.optionIdAttr + |
// Class="nom du champ" |
listHtml.optionInput.inputClassAttr + |
commonFieldsHtml.fieldInput.classAttr + |
'>' + |
'<input' + |
// Type |
listHtml.optionInput.inputTypeAttr + |
commonFieldsHtml.fieldInput.typeAttr + |
// Id |
listFieldsHtml.inputIdAttr + |
// DataId |
constHtml.fieldDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
// value-id |
listHtml.optionInput.inputOptionIdAttr + |
listFieldsHtml.optionIdAttr + |
// Name |
listHtml.optionInput.inputNameAttr + |
commonFieldsHtml.fieldInput.nameAttr + |
// Value |
' value="' + fieldOption.optionValue + '"' + |
// Checked |
listHtml.optionInput.inputDefaultAttr + |
listFieldsHtml.defaultAttr + |
// Class="nom du champ" |
listHtml.optionInput.inputClassAttr + |
commonFieldsHtml.fieldInput.classAttr + |
'>' + |
// Label de l'option |
fieldOption.optionText + |
'</label>'; |
|
// Si valeur "autre" est cochée |
if( fieldOtherValue ) { |
fieldHtml += |
'<label for="other"' + |
constHtml.fieldDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
'>' + |
'<input' + |
listHtml.optionInput.inputTypeAttr + |
commonFieldsHtml.fieldInput.typeAttr + |
' id="other"' + |
listHtml.optionInput.inputNameAttr + |
commonFieldsHtml.fieldInput.nameAttr + |
' value="other"' + |
listHtml.optionInput.inputClassAttr + |
constHtml.fieldDataIdAttr + |
commonFieldsHtml.fieldInput.classAttr + |
commonFieldsHtml.dataIdAttr + |
'>' + |
'Autre</label>'; |
} |
836,31 → 869,30 |
} |
// Fin du conteneur |
fieldHtml += '</div>'; |
|
break; |
|
case 'list-checkbox': |
fieldHtml = |
'<div class="multiselect ' + fieldElement + fieldHelpClass + '"' + |
// Classe 'and-help' |
'<div class="multiselect ' + fieldElement + commonFieldsHtml.helpClass + '"' + |
// DataId |
constHtml.fieldDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
'>' + |
'<label>' + |
// Nom du champ |
constHtml.fieldContainerContent + |
listFieldsHtml.containerContent + |
'</label>' + |
'<div class="selectBox"' + |
// DataId |
constHtml.fieldDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
'>' + |
|
'<select' + |
// DataId |
constHtml.fieldDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
// Required |
constHtml.fieldMandatoryAttr + |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// Info bulle |
constHtml.fieldTitleAttr + |
commonFieldsHtml.titleAttr + |
'>' + |
// Apparait dans la barre de sélection |
'<option>Plusieurs choix possibles</option>' + |
869,116 → 901,117 |
'</div>' + |
'<div class="checkboxes hidden"' + |
// DataId |
constHtml.fieldDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
'>'; |
// On déroule les différentes valeurs |
for ( let i = 0; i < count; i++ ) { |
let fieldOption = fieldOptions[i]; |
|
listHtml.optionInput.inputTypeAttr = ' type="checkbox"'; |
listHtml.optionInput.inputIdAttr = ' id="' + fieldOption.optionValue.toLowerCase() + '"'; |
listHtml.optionLabel.labelForAttr = ' for="' + fieldOption.optionValue.toLowerCase() + '"'; |
listHtml.optionInput.inputDefaultAttr = ''; |
|
// Type="checkbox" |
commonFieldsHtml.fieldInput.typeAttr = ' type="checkbox"'; |
// Id |
listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue.toLowerCase() + '"'; |
// For |
listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue.toLowerCase() + '"'; |
// Default |
listFieldsHtml.defaultAttr = '';//réinitialisation |
if( fieldOption.isDefault ) { |
listHtml.optionInput.inputDefaultAttr = ' checked'; |
listFieldsHtml.defaultAttr = ' checked';//affectation |
} |
|
// value-id |
if( '' !== fieldOption.optionIndex ) { |
listHtml.optionInput.inputOptionIdAttr = ' value-id="' + fieldOption.optionIndex + '"'; |
listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"'; |
} |
|
fieldHtml += |
|
'<label' + |
listHtml.optionLabel.labelForAttr + |
// For |
listFieldsHtml.forAttr + |
// value-id |
listHtml.optionInput.inputOptionIdAttr + |
listFieldsHtml.optionIdAttr + |
'>' + |
|
'<input type="checkbox"' + |
// Id |
listFieldsHtml.inputIdAttr + |
// value-id |
listHtml.optionInput.inputOptionIdAttr + |
listFieldsHtml.optionIdAttr + |
// Name |
listHtml.optionInput.inputNameAttr + |
commonFieldsHtml.fieldInput.nameAttr + |
// Value |
' value="' + fieldOption.optionValue + '"' + |
// Checked |
listHtml.optionInput.inputDefaultAttr + |
listFieldsHtml.defaultAttr + |
// Class="nom du champ" |
listHtml.optionInput.inputClassAttr + |
commonFieldsHtml.fieldInput.classAttr + |
// DataId |
constHtml.fieldDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
'>' + |
// Label de l'option |
fieldOption.optionText + |
'</label>'; |
} |
|
// Si valeur "autre" est cochée |
if( fieldOtherValue ) { |
fieldHtml += |
'<label for="other"' + |
// DataId |
constHtml.fieldDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
'>' + |
'<input type="checkbox"' + |
' id="other"' + |
listHtml.optionInput.inputNameAttr + |
commonFieldsHtml.fieldInput.nameAttr + |
' value="other"' + |
listHtml.optionInput.inputClassAttr + |
commonFieldsHtml.fieldInput.classAttr + |
// DataId |
constHtml.fieldDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
'>' + |
'Autre</label>'; |
} |
|
// Fermeture des conteneurs .multiselect .checkboxes |
fieldHtml += |
'</div>'+ |
'</div>' + |
fieldHtmlObject.fieldHelpButton; |
|
// Bouton 'help' |
commonFieldsHtml.helpButton; |
break; |
|
case 'select': |
fieldHtml = |
'<label' + |
' for="' + fieldKey + '"' + |
commonFieldsHtml.fieldLabel.forAttr + |
// Info bulle |
constHtml.fieldTitleAttr + |
commonFieldsHtml.titleAttr + |
'>' + |
// Nom du champ |
constHtml.fieldContainerContent + |
listFieldsHtml.containerContent + |
'</label>' + |
// Conteneur/Wrapper |
'<div class="select-wrapper add-field-select ' + fieldElement + fieldHelpClass + '"' + |
constHtml.fieldDataIdAttr + |
// +Classe 'and-help' |
'<div class="select-wrapper add-field-select ' + fieldElement + commonFieldsHtml.helpClass + '"' + |
// DataID |
commonFieldsHtml.dataIdAttr + |
'>' + |
'<select' + |
' name="' + fieldKey + '"' + |
commonFieldsHtml.fieldInput.nameAttr + |
' id="' + fieldKey + '"' + |
//Class |
listHtml.optionInput.inputClassAttr + |
commonFieldsHtml.fieldInput.classAttr + |
// Required |
constHtml.fieldMandatoryAttr + |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// DataId |
constHtml.fieldDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
'>'; |
|
// On déroule les différentes valeurs |
for ( let i = 0; i < count; i++ ) { |
let fieldOption = fieldOptions[i]; |
|
listHtml.optionInput.inputDefaultAttr = ''; |
listHtml.optionInput.inputdisabledAttr = ''; |
|
if( fieldOption.isDefault ) { |
listHtml.optionInput.inputDefaultAttr = ' selected="selected"'; |
// Default |
listFieldsHtml.defaultAttr = '';//réinitialisation |
if( fieldOption.isDefault ) {//affectation |
listFieldsHtml.defaultAttr = ' selected="selected"'; |
} |
|
// value-id |
if( '' !== fieldOption.optionIndex ) { |
listHtml.optionInput.inputOptionIdAttr = ' value-id="' + fieldOption.optionIndex + '"'; |
listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"'; |
} |
|
fieldHtml += |
986,131 → 1019,132 |
// Value |
' value="' + fieldOption.optionValue + '"' + |
// Value-id |
listHtml.optionInput.inputOptionIdAttr + |
listFieldsHtml.optionIdAttr + |
// Selected |
listHtml.optionInput.inputDefaultAttr + |
listFieldsHtml.defaultAttr + |
'>' + |
// Option |
fieldOption.optionText + |
'</option>'; |
} |
|
// Si valeur "autre" est cochée |
if( fieldOtherValue ) { |
fieldHtml += |
'<option class="other" value="other"' + constHtml.fieldDataIdAttr + '>' + |
'<option class="other" value="other"' + commonFieldsHtml.dataIdAttr + '>' + |
'Autre' + |
'</option>'; |
} |
|
// Fermeture des conteneurs |
fieldHtml += |
'</select>' + |
// Fin du conteneur/wrapper |
'</div>' + |
|
fieldHtmlObject.fieldHelpButton; |
|
// Bouton 'help' |
commonFieldsHtml.helpButton; |
break; |
|
case 'file' : |
fieldHtmlObject.fieldInput.inputClassAttr = fieldHtmlObject.fieldInput.inputClassAttr.slice(0, -1); |
fieldHtmlObject.fieldInput.inputClassAttr += ' input-file"'; |
// Ouvrir l'attribut class (suppression de '"') |
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1); |
commonFieldsHtml.fieldInput.classAttr += ' input-file"'; |
// Class du label |
commonFieldsHtml.fieldLabel.classAttr = ' class="label-file"'; |
// Type de fichiers acceptés |
commonFieldsHtml.fieldInput.otherAttr += ' accept="application/pdf, image/*, video/*"'; |
|
fieldHtmlObject.fieldLabel.labelClassAttr = ' class="label-file"'; |
|
fieldHtmlObject.fieldInput.inputOtherAttr += ' accept="application/pdf, image/*, video/*"'; |
|
fieldHtml = |
'<div class="input-file-container' + fieldHelpClass + '">' + |
// Classe 'and-help' |
'<div class="input-file-container' + commonFieldsHtml.helpClass + '">' + |
'<input' + |
// Type |
fieldHtmlObject.fieldInput.inputTypeAttr + |
commonFieldsHtml.fieldInput.typeAttr + |
// Name |
fieldHtmlObject.fieldInput.inputNameAttr + |
commonFieldsHtml.fieldInput.nameAttr + |
// DataId |
fieldHtmlObject.fieldInput.inputDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
// Class |
fieldHtmlObject.fieldInput.inputClassAttr + |
commonFieldsHtml.fieldInput.classAttr + |
// Info-bulle |
fieldHtmlObject.fieldTitleAttr + |
commonFieldsHtml.titleAttr + |
// Placeholder |
fieldHtmlObject.fieldInput.inputPlaceholderAttr + |
commonFieldsHtml.fieldInput.placeholderAttr + |
// Required |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// Autres attributs |
fieldHtmlObject.fieldInput.inputOtherAttr + |
commonFieldsHtml.fieldInput.otherAttr + |
'>' + |
|
'<label' + |
// For |
fieldHtmlObject.fieldLabel.labelForAttr + |
commonFieldsHtml.fieldLabel.forAttr + |
// Class |
fieldHtmlObject.fieldLabel.labelClassAttr + |
commonFieldsHtml.fieldLabel.classAttr + |
// Info-bulle |
fieldHtmlObject.fieldTitleAttr + |
commonFieldsHtml.titleAttr + |
'><i class="fas fa-download"></i> ' + |
// Nom du champ |
fieldHtmlObject.fieldLabel.labelContent + |
commonFieldsHtml.fieldLabel.labelContent + |
'</label>' + |
|
'</div>' + |
|
// Bouton supprimer le fichier |
'<div class="remove-file button" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>' + |
|
fieldHtmlObject.fieldHelpButton; |
|
// Bouton 'help' |
commonFieldsHtml.helpButton; |
break; |
|
case 'textarea': |
fieldHtmlObject.fieldLabel.labelClassAttr = ' class="' + fieldHelpClass + '"'; |
// Classe 'and-help' |
commonFieldsHtml.fieldLabel.classAttr = ' class="' + commonFieldsHtml.helpClass + '"'; |
// Autres attributs |
fieldHtmlObject.fieldInput.inputOtherAttr += ' id="' + fieldKey + '"'; |
commonFieldsHtml.fieldInput.otherAttr += ' id="' + fieldKey + '"'; |
|
fieldHtml = |
'<label' + |
// For |
fieldHtmlObject.fieldLabel.labelForAttr + |
commonFieldsHtml.fieldLabel.forAttr + |
// Class |
fieldHtmlObject.fieldLabel.labelClassAttr + |
commonFieldsHtml.fieldLabel.classAttr + |
// Info-bulle |
fieldHtmlObject.fieldTitleAttr + |
commonFieldsHtml.titleAttr + |
// Autres attributs |
fieldHtmlObject.fieldLabel.labelOtherAttr + |
commonFieldsHtml.fieldLabel.otherAttr + |
'>' + |
// Nom du champ |
fieldHtmlObject.fieldLabel.labelContent + |
commonFieldsHtml.fieldLabel.labelContent + |
'</label>' + |
|
fieldHtmlObject.fieldHelpButton + |
|
// Bouton 'help' |
commonFieldsHtml.helpButton + |
'<textarea' + |
// Name |
fieldHtmlObject.fieldInput.inputNameAttr + |
commonFieldsHtml.fieldInput.nameAttr + |
// DataId |
fieldHtmlObject.fieldInput.inputDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
// Class |
fieldHtmlObject.fieldInput.inputClassAttr + |
commonFieldsHtml.fieldInput.classAttr + |
// Info-bulle |
fieldHtmlObject.fieldTitleAttr + |
commonFieldsHtml.titleAttr + |
// Info-bulle |
fieldHtmlObject.fieldInput.inputPlaceholderAttr + |
commonFieldsHtml.fieldInput.placeholderAttr + |
// Required |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// Autres attributs |
fieldHtmlObject.fieldInput.inputOtherAttr + |
commonFieldsHtml.fieldInput.otherAttr + |
'></textarea>'; |
|
break; |
|
case 'range': |
fieldHtmlObject.fieldLabel.labelClassAttr = ' class="' + fieldHelpClass + '"'; |
|
// Classe 'and-help' |
commonFieldsHtml.fieldLabel.classAttr = ' class="' + commonFieldsHtml.helpClass + '"'; |
// Step |
if( '' !== fieldStep ) { |
fieldHtmlObject.fieldInput.inputOtherAttr += ' step="' + fieldStep + '"'; |
commonFieldsHtml.fieldInput.otherAttr += ' step="' + fieldStep + '"'; |
} |
|
// Min |
if( '' !== fieldMin ) { |
fieldHtmlObject.fieldInput.inputOtherAttr += ' min="' + fieldMin + '"'; |
commonFieldsHtml.fieldInput.otherAttr += ' min="' + fieldMin + '"'; |
} |
|
//Max |
if( '' !== fieldMax ) { |
fieldHtmlObject.fieldInput.inputOtherAttr += ' max="' + fieldMax + '"'; |
commonFieldsHtml.fieldInput.otherAttr += ' max="' + fieldMax + '"'; |
} |
|
fieldHtml = |
1117,140 → 1151,141 |
'<div class="number">' + |
'<label' + |
// For |
fieldHtmlObject.fieldLabel.labelForAttr + |
commonFieldsHtml.fieldLabel.forAttr + |
// Class |
fieldHtmlObject.fieldLabel.labelClassAttr + |
commonFieldsHtml.fieldLabel.classAttr + |
// Info-bulle |
fieldHtmlObject.fieldTitleAttr + |
commonFieldsHtml.titleAttr + |
// Autres attributs |
fieldHtmlObject.fieldLabel.labelOtherAttr + |
commonFieldsHtml.fieldLabel.otherAttr + |
'>' + |
// Nom du champ |
fieldHtmlObject.fieldLabel.labelContent + |
commonFieldsHtml.fieldLabel.labelContent + |
'</label>' + |
// Bouton 'help' |
commonFieldsHtml.helpButton + |
|
fieldHtmlObject.fieldHelpButton + |
|
'<input' + |
// Type |
fieldHtmlObject.fieldInput.inputTypeAttr + |
commonFieldsHtml.fieldInput.typeAttr + |
// Name |
fieldHtmlObject.fieldInput.inputNameAttr + |
commonFieldsHtml.fieldInput.nameAttr + |
// DataId |
fieldHtmlObject.fieldInput.inputDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
// Class |
fieldHtmlObject.fieldInput.inputClassAttr + |
commonFieldsHtml.fieldInput.classAttr + |
// Info-bulle |
fieldHtmlObject.fieldTitleAttr + |
commonFieldsHtml.titleAttr + |
// Info-bulle |
fieldHtmlObject.fieldInput.inputPlaceholderAttr + |
commonFieldsHtml.fieldInput.placeholderAttr + |
// Required |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// Autres attributs |
fieldHtmlObject.fieldInput.inputOtherAttr + |
commonFieldsHtml.fieldInput.otherAttr + |
'>' + |
|
'</div>'; |
|
break; |
|
case 'date': |
case 'number': |
fieldHtmlObject.fieldInput.inputClassAttr = fieldHtmlObject.fieldInput.inputClassAttr.slice(0, -1); |
fieldHtmlObject.fieldInput.inputClassAttr += fieldHelpClass + '"'; |
|
// Ouvrir l'attribut class (suppression de '"') |
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1); |
// Classe 'and-help' |
commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"'; |
// Step |
if( '' !== fieldStep ) { |
fieldHtmlObject.fieldInput.inputOtherAttr += ' step="' + fieldStep + '"'; |
commonFieldsHtml.fieldInput.otherAttr += ' step="' + fieldStep + '"'; |
} |
|
// Min |
if( '' !== fieldMin ) { |
fieldHtmlObject.fieldInput.inputOtherAttr += ' min="' + fieldMin + '"'; |
commonFieldsHtml.fieldInput.otherAttr += ' min="' + fieldMin + '"'; |
} |
|
// Max |
if( '' !== fieldMax ) { |
fieldHtmlObject.fieldInput.inputOtherAttr += ' max="' + fieldMax + '"'; |
commonFieldsHtml.fieldInput.otherAttr += ' max="' + fieldMax + '"'; |
} |
|
fieldHtml = |
'<div class="number">' + |
'<label' + |
// For |
fieldHtmlObject.fieldLabel.labelForAttr + |
commonFieldsHtml.fieldLabel.forAttr + |
// Class |
fieldHtmlObject.fieldLabel.labelClassAttr + |
commonFieldsHtml.fieldLabel.classAttr + |
// Info-bulle |
fieldHtmlObject.fieldTitleAttr + |
commonFieldsHtml.titleAttr + |
// Autres attributs |
fieldHtmlObject.fieldLabel.labelOtherAttr + |
commonFieldsHtml.fieldLabel.otherAttr + |
'>' + |
// Nom du champ |
fieldHtmlObject.fieldLabel.labelContent + |
commonFieldsHtml.fieldLabel.labelContent + |
'</label>' + |
|
'<input' + |
// Type |
fieldHtmlObject.fieldInput.inputTypeAttr + |
commonFieldsHtml.fieldInput.typeAttr + |
// Name |
fieldHtmlObject.fieldInput.inputNameAttr + |
commonFieldsHtml.fieldInput.nameAttr + |
// DataId |
fieldHtmlObject.fieldInput.inputDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
// Class |
fieldHtmlObject.fieldInput.inputClassAttr + |
commonFieldsHtml.fieldInput.classAttr + |
// Info-bulle |
fieldHtmlObject.fieldTitleAttr + |
commonFieldsHtml.titleAttr + |
// Info-bulle |
fieldHtmlObject.fieldInput.inputPlaceholderAttr + |
commonFieldsHtml.fieldInput.placeholderAttr + |
// Required |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// Autres attributs |
fieldHtmlObject.fieldInput.inputOtherAttr + |
commonFieldsHtml.fieldInput.otherAttr + |
'>' + |
|
fieldHtmlObject.fieldHelpButton + |
|
// Bouton 'help' |
commonFieldsHtml.helpButton + |
'</div>'; |
|
break; |
|
case 'text' : |
case 'email': |
default: |
fieldHtmlObject.fieldInput.inputClassAttr = fieldHtmlObject.fieldInput.inputClassAttr.slice(0, -1); |
fieldHtmlObject.fieldInput.inputClassAttr += fieldHelpClass + '"'; |
// Ouvrir l'attribut class (suppression de '"') |
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1); |
// Classe 'and-help' |
commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"'; |
|
fieldHtml = |
'<label' + |
// For |
fieldHtmlObject.fieldLabel.labelForAttr + |
commonFieldsHtml.fieldLabel.forAttr + |
// Class |
fieldHtmlObject.fieldLabel.labelClassAttr + |
commonFieldsHtml.fieldLabel.classAttr + |
// Info-bulle |
fieldHtmlObject.fieldTitleAttr + |
commonFieldsHtml.titleAttr + |
// Autres attributs |
fieldHtmlObject.fieldLabel.labelOtherAttr + |
commonFieldsHtml.fieldLabel.otherAttr + |
'>' + |
// Nom du champ |
fieldHtmlObject.fieldLabel.labelContent + |
commonFieldsHtml.fieldLabel.labelContent + |
'</label>' + |
|
'<input' + |
// Type |
fieldHtmlObject.fieldInput.inputTypeAttr + |
commonFieldsHtml.fieldInput.typeAttr + |
// Name |
fieldHtmlObject.fieldInput.inputNameAttr + |
commonFieldsHtml.fieldInput.nameAttr + |
// DataId |
fieldHtmlObject.fieldInput.inputDataIdAttr + |
commonFieldsHtml.dataIdAttr + |
// Class |
fieldHtmlObject.fieldInput.inputClassAttr + |
commonFieldsHtml.fieldInput.classAttr + |
// Info-bulle |
fieldHtmlObject.fieldTitleAttr + |
commonFieldsHtml.titleAttr + |
// Info-bulle |
fieldHtmlObject.fieldInput.inputPlaceholderAttr + |
commonFieldsHtml.fieldInput.placeholderAttr + |
// Required |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// Autres attributs |
fieldHtmlObject.fieldInput.inputOtherAttr + |
commonFieldsHtml.fieldInput.otherAttr + |
'>' + |
|
fieldHtmlObject.fieldHelpButton; |
|
// Bouton 'help' |
commonFieldsHtml.helpButton; |
break; |
} |
|
return fieldHtml; |
} |
|
1260,7 → 1295,6 |
options = []; |
|
$details.find( '.new-value' ).each( function() { |
|
options.push({ |
// Valeur transmise (value) |
optionValue : $( this ).find('.list-value').val().toLowerCase(), |
1271,7 → 1305,6 |
// Indice de l'option |
optionIndex : $( this ).attr('data-list-value-id') |
}); |
|
}); |
return options; |
} |
1278,63 → 1311,62 |
|
// Faire apparaitre un champ text "Autre" |
function onOtherOption( thisFieldset , index ) { |
// Ce champ (dans la prévisualisation) |
var thisPreviewFieldset = $( '.preview-fields[data-id="' + index + '"]'), |
//L'élément choisi |
var element = $('.field-element' , thisFieldset ).val(), |
element = $('.field-element' , thisFieldset ).val(), |
// Où insérer le champ "Autre" |
$element = $( '.' + element , thisFieldset ), |
$element = $( '.' + element , thisPreviewFieldset ), |
// html du champ "Autre" |
collectOther = |
'<label data-id="' + index + '" for="collect-other">Autre option :</label>' + |
'<input type="text" name="collect-other" data-id="' + index + '" class="collect-other" >'; |
|
// Pouvoir supprimer le champ "Autre" |
function optionRemove( thisFieldset ) { |
$( 'label[for="collect-other"]' , thisFieldset ).remove(); |
$( 'input.collect-other' , thisFieldset ).remove(); |
function optionRemove( thisPreviewFieldset ) { |
$( 'label[for="collect-other"]' , thisPreviewFieldset ).remove(); |
$( 'input.collect-other' , thisPreviewFieldset ).remove(); |
} |
|
switch( element ) { |
case 'radio' : |
// Lorsqu'un nouveau bouton est coché |
$( 'input' , thisFieldset ).on( 'change' , function () { |
$( 'input' , thisPreviewFieldset ).on( 'change' , function () { |
console.log($( this )); |
if( 'other' === $( this ).val() ) { |
// Insertion du champ "Autre" après les boutons |
$element.after( collectOther ); |
} else { |
// Suppression du champ autre |
optionRemove( thisFieldset ); |
optionRemove( thisPreviewFieldset ); |
} |
}); |
|
break; |
|
case 'select' : |
// Lorsque l'option "Autre" est selectionnée |
$( 'select' , thisFieldset ).on( 'change' , function () { |
$( 'select' , thisPreviewFieldset ).on( 'change' , function () { |
if( 'other' === $( this).val() ) { |
// Insertion du champ "Autre" après les boutons |
$element.after( collectOther ); |
// Suppression du champ autre |
} else { |
optionRemove( thisFieldset ); |
optionRemove( thisPreviewFieldset ); |
} |
}); |
|
break; |
|
case 'checkbox' : |
case 'list-checkbox' : |
// Lorsque "Autre" est coché |
$( 'input#other' , thisFieldset ).on( 'click' , function () { |
$( 'input#other' , thisPreviewFieldset ).on( 'click' , function () { |
// Insertion du champ "Autre" après les boutons |
if( $( this ).is( ':checked' ) ) { |
$element.after( collectOther ); |
} else { |
// Suppression du champ autre |
optionRemove( thisFieldset ); |
optionRemove( thisPreviewFieldset ); |
} |
}); |
|
break; |
|
default : |
1369,7 → 1401,6 |
onClickPreviewField( thisFieldset , index ) + |
'</div>' |
); |
|
// Ajout/suppression d'un champ texte "Autre" |
if( $( '.option-other-value' , thisFieldset ).is( ':checked' ) ) { |
onOtherOption( thisFieldset , index); |
1380,29 → 1411,35 |
firstClick = false; |
} |
|
// Activation/Desactivation et contenu de la modale Bootstrap |
// https://getbootstrap.com/docs/3.3/javascript/#modals |
function previewFieldHelpModal() { |
$( '#zone-supp' ).on( 'click' , '.help-button' , function ( event ) { |
var index = $( this ).closest( '.preview-fields' ).attr( 'data-id' ), |
thisFieldset = $( '.new-field[data-id="' + index + '"]' ), |
file = $( '.field-help' , thisFieldset )[0].files[0], |
tmppath = URL.createObjectURL( file ), |
helpModalHtml = ''; |
|
tmppath = URL.createObjectURL( file ); |
// Titre |
$( '#help-modal-label' ).text( 'Aide pour : ' + $( '.field-name' , thisFieldset ).val() ); |
|
// Contenu |
if( file.type.match( 'image' ) ) { |
$( '#print_content' ).append( '<img src="' + tmppath + '" style="max-width:100%">' ); |
} else if( file.type.match( 'pdf' ) ) { |
$( '#print_content' ).append( '<iframe src="' + tmppath + '" width="100%" height="650" align="middle" scrolling="no" frameborder="0"></iframe>' ); |
} |
|
// Sortie avec la touche escape |
$( '#help-modal' ).modal( { keyboard : true } ); |
// Affichage |
$( '#help-modal' ).modal( 'show' ); |
|
// Remplacer l'autofocus qui ne fonctionne plus en HTML5 |
// Message dans la doc de bootstrap : |
// Due to how HTML5 defines its semantics, |
// the autofocus HTML attribute has no effect in Bootstrap modals. |
// To achieve the same effect, use some custom JavaScript |
$( '#help-modal' ).on( 'shown.bs.modal' , function () { |
$( '#myInput' ).trigger( 'focus' ); |
}) |
|
// Réinitialisation |
$( '#help-modal' ).on( 'hidden.bs.modal' , function () { |
$( '#help-modal-label' ).text(); |
$( '#print_content' ).empty(); |
1411,7 → 1448,6 |
} |
|
|
|
/*************************** |
* Lancement des scripts * |
***************************/ |
1421,9 → 1457,6 |
var firstClick = true; |
|
jQuery( document ).ready( function() { |
// console.log($(location).attr('search')); |
// console.log($(location).attr('search').search('=')); |
// console.log($(location).attr('search').charAt(6)); |
// Identifiant de champ |
var fieldIndex = 0; |
// Ajout de nouveaux champs |
1430,16 → 1463,12 |
onClickAddNewFields( fieldIndex ); |
// Activation/Desactivation des boutons valider et prévisualiser |
activatePreviewAndValidateButtons(); |
|
// Prévisualisation des champs classiques |
DisplayClassicFields() |
|
|
DisplayClassicFields(); |
// Affichage des images ou nom des documents importés |
inputFile(); |
// Affichage des List-checkbox |
inputListCheckbox(); |
|
// Modale "aide" |
previewFieldHelpModal(); |
|
}); |