25,17 → 25,22 |
// Affiche un retour visuel dès que input:file change |
$fileInput.change( function( event ) { |
// Il est possible de supprimer un fichier |
// donc on vérifie que le 'change' est un ajout ou modification |
// donc on vérifie que le 'change' est un ajout ou modificationis-defaut-value |
if( !$.isEmptyObject( event.target.files[0] ) ) { |
var file = event.target.files[0], |
$theReturn = $( '.' + $( this ).attr( 'id' ) ); |
$theReturn = $( '.' + $( this ).attr( 'id' ) ); |
// Affichage du nom du fichier |
$theReturn.text( file.name ); |
// Si le fichier est une image on l'affiche |
if( file.type.match( 'image' ) ) { |
if( file.type.match( 'image/*' ) ) { |
// Chemin temporaire de l'image et affichage |
var tmppath = URL.createObjectURL( file ); |
$theReturn.removeClass( 'hidden' ).append( '<img src="' + tmppath + '" width="50%">' ); |
} else { |
$theReturn.removeClass( 'hidden' ).append( '<p>Le fichier doit être au format image (jpg, png, etc.)</p>' ); |
// lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js |
$( this ).clearInputs(); |
console.log(file); |
} |
} |
}); |
42,9 → 47,10 |
// Annuler le téléchargement |
$( '.remove-file' ).click( function() { |
var $thisFileInput = $( this ).prev( '.input-file-container' ).find( '.input-file' ); |
$thisFileInput.wrap( '<form>' ).closest( 'form' ).get(0).reset(); |
// lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js |
$thisFileInput.clearInputs(); |
$thisFileInput.triggerHandler( 'change' ); |
$thisFileInput.unwrap(); |
// $thisFileInput.unwrap(); |
$( this ).next( '.file-return' ).addClass( 'hidden' ).empty(); |
}); |
} |
54,7 → 60,7 |
// 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).attr( 'data-id' ) + '"]' ).toggleClass( 'hidden' ); |
$( '.checkboxes[data-id="' + $(this).data( 'id' ) + '"]' ).toggleClass( 'hidden' ); |
}); |
} |
|
106,12 → 112,13 |
'<label for="field-key" title="Nom du champ dans la base de données">'+ |
'Clé du champ *'+ |
'</label>'+ |
'<input type="text" name="field-key" data-id="' + fieldIndex + '" class="field-key" placeholder="Clé du champ" Pattern="[A-Z][A-Za-z]+" title="Clé Unique en Camelcase, pas d\'accents pas de caractères spéciaux." required>'+ |
'<input type="text" name="field-key" data-id="' + fieldIndex + '" class="field-key" 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>'+ |
'<p class="message">' + |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+ |
'Une clé doit être unique<br>' + |
'En camelCase (ecriture chameau)<br>'+ |
'Pas d\'accents ou de cédille, pas de caractères spéciaux.' + |
'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 |
'<label for="field-element" title="Quel type de champ">Type de champ *</label>'+ |
125,7 → 132,6 |
'<option value="list-checkbox">Liste de cases à cocher</option>'+ |
'<option value="radio">Boutons radio</option>'+ |
'<option value="date">Calendrier</option>'+ |
'<option value="file">Téléchargement</option>'+ |
'<option value="range">Curseur (entre 2 bornes)</option>'+ |
'<option value="number">Nombre</option>'+ |
'</select>'+ |
139,10 → 145,10 |
// Tooltip |
'<label for="field-description" title="Ajoutez une info-bulle">Info-bulle</label>'+ |
'<input type="text" name="field-description" data-id="' + fieldIndex + '" class="field-description" placeholder="Quelques mots">'+ |
// Import d'une image ou d'un pdf d'aide à afficher en popup |
// Import d'une image d'aide à afficher en popup |
'<div class="input-file-container">'+ |
'<input type="file" class="input-file field-help" name="field-help" data-id="' + fieldIndex + '" id="help-doc-' + fieldIndex + '" accept="application/pdf, image/*, video/*">'+ |
'<label for="field-help" class="label-file"><i class="fas fa-download"></i> Popup aide image/pdf</label>'+ |
'<input type="file" class="input-file field-help" name="field-help' + fieldIndex + '" data-id="' + fieldIndex + '" id="help-doc-' + fieldIndex + '" accept="image/*">'+ |
'<label for="field-help' + fieldIndex + '" class="label-file"><i class="fas fa-download"></i> Popup aide image (.jpg)</label>'+ |
'</div>'+ |
'<div class="remove-file button" name="remove-file" data-id="' + fieldIndex + '" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>'+ |
'<div class="file-return help-doc-' + fieldIndex + ' hidden"></div>'+ |
163,10 → 169,10 |
} |
|
// Supprimer un nouveau champ |
function onClickRemoveField ( keyFlag , nameFlag ) { |
function onClickRemoveField () { |
$( '.remove-field' ).click( function() { |
$(this).closest('fieldset').hide( 200 , function () { |
$(this).remove(); |
$( this ).closest('fieldset').hide( 200 , function () { |
$( this ).remove(); |
}); |
}); |
} |
190,14 → 196,11 |
// Si on hésite on qu'on se trompe dans la liste : |
// les champs de détails de l'option précédente doivent être supprimés |
$( '.field-details[data-id="' + fieldIndex + '"]' ).hide( 200 , function () { |
$(this).remove(); |
$( this ).remove(); |
}); |
|
// Html de recueil de données en fonction de l'élément choisi |
switch( $( this ).val() ) { |
case 'file': |
break; |
|
case 'number': |
case 'range': |
displayFieldDetailsCollect( |
314,8 → 317,6 |
'</div>'+ |
'</div>' |
).hide().show( 200); |
// Activer la checkbox de valeur par default uniquement si une valeur est entrée |
onInputListValueLabelEnableDefaultCheckbox( valueIndex ); |
// Une seule valeur par défaut pour select et radio |
onClickDefaultValueRemoveOthers( fieldIndex ); |
// Supprimer une valeur |
324,12 → 325,13 |
} |
|
// Activer la checkbox de valeur par default uniquement si une valeur est entrée |
function onInputListValueLabelEnableDefaultCheckbox( valueIndex ) { |
$( '.new-value[data-list-value-id="' + valueIndex + '"] .list-value' ).on( 'input' , function() { |
if( $(this).val() !== '' ) { |
$( '.is-defaut-value[data-list-value-id="' + valueIndex + '"]' ).removeAttr( 'disabled'); |
function onInputListValueLabelEnableDefaultCheckbox() { |
$( '#new-fields' ).on( 'input' , '.list-value' , function() { |
var thisValue = $( this ).parent( '.new-value' ); |
if( '' !== $( this ).val() ) { |
$( '.is-defaut-value', thisValue ).removeAttr( 'disabled' ); |
} else { |
$( '.is-defaut-value[data-list-value-id="' + valueIndex + '"]' ).attr( 'disabled', true ).removeAttr( 'checked' ); |
$( '.is-defaut-value', thisValue ).attr( 'disabled', true ).removeAttr( 'checked' ); |
} |
}); |
} |
351,8 → 353,8 |
// Bouton supprimer une valeur |
function onClickRemoveListValue( fieldIndex ) { |
$( '.remove-value.button[data-id="' + fieldIndex + '"]' ).click( function() { |
$( '.new-value[data-list-value-id="' + $( this ).attr( 'data-list-value-id' ) + '"]' ).hide( 200 , function () { |
$(this).remove(); |
$( '.new-value[data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' ).hide( 200 , function () { |
$( this ).remove(); |
}); |
}); |
} |
484,8 → 486,8 |
// Le champ est signalé en rouge |
$( this ).addClass( 'invalid' ); |
// Un message d'alerte apparait après le champ |
if( 0 === $( this).next( '.validation-warning' ).length ) { |
$( this).after( |
if( 0 === $( this ).next( '.validation-warning' ).length ) { |
$( this ).after( |
'<p class="validation-warning message">' + |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' + |
' Ce champ est requis' + |
496,7 → 498,7 |
// Le champ est signalé en rouge |
$( this ).removeClass( 'invalid' ); |
// Le message d'alerte du champ est supprimé |
if( 0 < $( this).next( '.validation-warning' ).length ) { |
if( 0 < $( this ).next( '.validation-warning' ).length ) { |
$( this ).next( '.validation-warning' ).hide( 200 , function () { |
$( this ).remove(); |
}); |
532,7 → 534,7 |
function onClickStoreNewFields() { |
// Lorsqu'on valide |
var resultArrayIndex = 0; |
var count = $( 'fieldset' ).last().attr('data-id'); |
var count = $( 'fieldset' ).last().data( 'id' ); |
var helpFileExists = false; |
// Savoir si au moins un fichier "aide" est enregistré |
$( '.field-help' ).each( function () { |
543,10 → 545,10 |
// dans ce cas intégrer dans le formulaire à soumettre un bloc |
// qui contiendra une copie de chacun de ces input[type="file"] |
if( helpFileExists ){ |
$('#submit-button').before( '<div id="help-doc-submit" class="hidden"></div>' ); |
$( '#submit-button' ).before( '<div id="help-doc-submit" style="position:fixed;visibility:hidden;"></div>' ); |
} |
// On déroule les blocs de champs supplémentaires |
for( var index = $( 'fieldset' ).first().attr('data-id') ; index <= count ; index++ ) { |
for( var index = $( 'fieldset' ).first().data( 'id' ) ; index <= count ; index++ ) { |
var thisFieldset = $( 'fieldset[data-id="' + index + '"]'); |
// Certains indices peuvent correspondre à un champ supprimé |
if( 0 < $( thisFieldset ).length ) { |
569,14 → 571,14 |
// Collecte les des données dépendantes de l'élément choisi |
// sous forme d'un tableau de resultats |
onSelectCollectDataValuesToSubmit( datasToSubmit[ resultArrayIndex ] , thisFieldset ); |
if( $.isEmptyObject(datasToSubmit[ resultArrayIndex ].fieldValues) ){ |
|
if( $.isEmptyObject( datasToSubmit[ resultArrayIndex ].fieldValues ) ){ |
delete datasToSubmit[ resultArrayIndex ].fieldValues; |
} |
// Copie d'un champ de fichier d'aide dans le bloc d'envoi |
if( '' !== $( '.field-help' , thisFieldset ).val() ) { |
$( '.field-help' , thisFieldset ).clone() |
.attr( 'id' , datasToSubmit[ resultArrayIndex ].key )// l'id prend la valeur de la clé |
.css( 'position' , 'static' )// Retrouver facilement le bloc dans la page |
.attr( 'name' , 'help-' + datasToSubmit[ resultArrayIndex ].key )// l'attribut name prend la valeur de la clé |
.appendTo( '#help-doc-submit' ); |
} |
resultArrayIndex++; |
583,13 → 585,14 |
} |
} |
var resultsArrayJson = JSON.stringify( datasToSubmit ); |
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( |
'<input type="hidden" name="champs-supp" id="champs-supp" value=\'' + resultsArrayJson + '\'>' |
$( '#submit-button' ).before( |
'<input type="hidden" name="champs-supp" id="champs-supp" value="' + resultsArrayJson + '">' |
); |
} |
|
597,8 → 600,6 |
// pour les données dépendant de l'élément choisi |
function onSelectCollectDataValuesToSubmit( datasToSubmitObject , thisFieldset ) { |
switch( datasToSubmitObject.element ) { |
// case 'file' : |
// Rien à faire, pas de détails à transmettre |
case 'select': |
case 'checkbox': |
case 'list-checkbox': |
607,7 → 608,7 |
// Ajout des valeurs de liste |
onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset ); |
// S'il y a une valeur 'autre' on l'indique à la fin de la liste |
if( $('.option-other-value' , thisFieldset ).attr( 'checked' ) && datasToSubmitObject.fieldValues.listValue.indexOf( 'other' ) === -1 ) { |
if( $( '.option-other-value' , thisFieldset ).attr( 'checked' ) && -1 === datasToSubmitObject.fieldValues.listValue.indexOf( 'other' ) ) { |
datasToSubmitObject.fieldValues.listValue.push( 'other' ); |
} |
break; |
652,7 → 653,7 |
|
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' ) ) { |
if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).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 ) { |
674,16 → 675,16 |
// Prévisualisation |
function DisplayClassicFields() { |
// Affichage du titre du widget |
renderFields( $('#titre') , $( '.widget-renderer h1' ) ); |
renderFields( $( '#titre' ) , $( '.widget-renderer h1' ) ); |
// Affichage du nom du projet |
renderFields( $('#projet') , $( '.projet-description' )); |
renderFields( $( '#projet' ) , $( '.projet-description' )); |
// Affichage de la description |
renderFields( $('#description') , $( '.preview-description' ) ); |
renderFields( $( '#description' ) , $( '.preview-description' ) ); |
// Affichage du logo s'il existe déjà |
if( 0 !== $('#logo').val().length || $('#logo')[0].defaultValue ) { |
if( 0 !== $( '#logo' ).val().length || $( '#logo' )[0].defaultValue ) { |
$( '#preview-logo' ).append( |
'<img src="' + |
$( '#group-settings-form .logo img' ).prop('src') + |
$( '#group-settings-form .logo img' ).prop( 'src' ) + |
'" width="75%"' + |
'>' |
); |
716,7 → 717,7 |
// Affichage des infos dès que disponibles |
// pour les champs classiques |
function renderFields( $source , $taget ) { |
if($source.val()) { |
if( $source.val() ) { |
$taget.text( $source.val() ); |
} |
$source.change( function () { |
1079,54 → 1080,6 |
commonFieldsHtml.helpButton; |
break; |
|
case '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/*"'; |
|
fieldHtml = |
// Classe 'and-help' |
'<div class="input-file-container' + commonFieldsHtml.helpClass + '">' + |
'<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 + |
'>' + |
'<label' + |
// For |
commonFieldsHtml.fieldLabel.forAttr + |
// Class |
commonFieldsHtml.fieldLabel.classAttr + |
// Info-bulle |
commonFieldsHtml.titleAttr + |
'><i class="fas fa-download"></i> ' + |
// Nom du champ |
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>' + |
// Bouton 'help' |
commonFieldsHtml.helpButton; |
break; |
|
case 'textarea': |
// Classe 'and-help' |
commonFieldsHtml.fieldLabel.classAttr = ' class="' + commonFieldsHtml.helpClass + '"'; |
1356,7 → 1309,7 |
// Booléen "default" |
isDefault : $( this ).find( '.is-defaut-value').is( ':checked' ), |
// Indice de l'option |
optionIndex : $( this ).attr('data-list-value-id') |
optionIndex : $( this ).data( 'list-value-id') |
}); |
}); |
return options; |
1428,7 → 1381,7 |
|
// Prévisualisation des nouveaux champs |
function newFieldsPreview() { |
var count = $( 'fieldset' ).last().attr('data-id'); |
var count = $( 'fieldset' ).last().data( 'id' ); |
// Si on a déjà prévisualisé on efface tout pour recommencer |
if( 0 < $( '.preview-fields' ).length ) { |
$( '.preview-fields' ).each( function () { |
1443,7 → 1396,7 |
); |
} |
// Parcourir tous les blocs d'infos de champs supplémentaires |
for( var index = $( 'fieldset' ).first().attr('data-id') ; index <= count ; index++ ) { |
for( var index = $( 'fieldset' ).first().data( 'id' ) ; index <= count ; index++ ) { |
var thisFieldset = $( 'fieldset[data-id="' + index + '"]'); |
// Certains indices peuvent correspondre à un champ supprimé |
if( 0 < $( thisFieldset ).length ) { |
1467,7 → 1420,7 |
// 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' ), |
var index = $( this ).closest( '.preview-fields' ).data( 'id' ), |
thisFieldset = $( '.new-field[data-id="' + index + '"]' ), |
file = $( '.field-help' , thisFieldset )[0].files[0], |
tmppath = URL.createObjectURL( file ); |
1474,10 → 1427,10 |
// Titre |
$( '#help-modal-label' ).text( 'Aide pour : ' + $( '.field-name' , thisFieldset ).val() ); |
// Contenu |
if( file.type.match( 'image' ) ) { |
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>' ); |
} else { |
$( '#print_content' ).append( '<p>Erreur : le fichier n\'est pas une image</p>' ); |
} |
// Sortie avec la touche escape |
$( '#help-modal' ).modal( { keyboard : true } ); |
1522,8 → 1475,10 |
inputFile(); |
// Affichage des List-checkbox |
inputListCheckbox(); |
// Activer la checkbox de valeur par default uniquement si une valeur est entrée |
onInputListValueLabelEnableDefaultCheckbox(); |
// Affichage des Range |
inputRangeDisplayNumber() |
inputRangeDisplayNumber(); |
// Modale "aide" |
previewFieldHelpModal(); |
}); |