WebSVN – eFlore/Applications.cel – Diff – /trunk/widget/modules/manager/squelettes/js/manager.js

     return false;
   });
   // 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);
+      }
+    }
   });
   // Annuler le téléchargement
   $( '.remove-file' ).click( function() {
     var $thisFileInput = $( this ).prev( '.input-file-container' ).find( '.input-file' );
+    // lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
-    $thisFileInput.wrap( '<form>' ).closest( 'form' ).get(0).reset();
+    $thisFileInput.clearInputs();
     $thisFileInput.triggerHandler( 'change' );
-    $thisFileInput.unwrap();
+    // $thisFileInput.unwrap();
     $( this ).next( '.file-return' ).addClass( 'hidden' ).empty();
   });
+}
 // Style et affichage des list-checkboxes
 function 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).attr( 'data-id' ) + '"]' ).toggleClass( 'hidden' );
+    $( '.checkboxes[data-id="' + $(this).data( 'id' ) + '"]' ).toggleClass( 'hidden' );
   });
+}
       '<input type="text" name="field-name" data-id="' + fieldIndex + '" class="field-name" placeholder="Titre de votre champ" title="Donnez un titre à votre champ" required>'+
       // Clé du champ
       '<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>'+
+        'En "camelCase" (ecriture chameau)<br>'+
+        'Ou en minuscule avec tirets ("-") si nécessaire<br>'+
-        'Pas d\'accents ou de cédille, pas de caractères spéciaux.' +
+        '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>'+
       '<div class="select-wrapper add-field-select" data-id="' + fieldIndex + '">'+
         '<select name="field-element" data-id="' + fieldIndex + '" class="field-element">'+
           '<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="file">Téléchargement</option>'+
           '<option value="range">Curseur (entre 2 bornes)</option>'+
           '<option value="number">Nombre</option>'+
         '</select>'+
       '</div>'+
       // Checkbox "champ requis"
       '<label for="field-unit" title="Unité de mesure de vos valeurs">Unités ( cm, kg, ha, etc.)</label>'+
       '<input type="text" name="field-unit" data-id="' + fieldIndex + '" class="field-unit" placeholder="symbole de vos unités">'+
       // 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/*">'+
+        '<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" class="label-file"><i class="fas fa-download"></i> Popup aide image/pdf</label>'+
+        '<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>'+
       // Boutons supprimer
       '<label for="remove-field">Supprimer</label>'+
     $( '.field-title[data-id="' + fieldIndex + '"]' ).text( $( this ).val() );
   });
+}
 // Supprimer un nouveau champ
-function onClickRemoveField ( keyFlag , nameFlag ) {
+function onClickRemoveField () {
   $( '.remove-field' ).click( function() {
-    $(this).closest('fieldset').hide( 200 , function () {
+    $( this ).closest('fieldset').hide( 200 , function () {
-      $(this).remove();
+      $( this ).remove();
     });
   });
     // On intialise l'index pour les listes la variable qui contiendra un id pour chaque option
     var valueIndex = 0;
     // 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;
     switch( $( this ).val() ) {
       case 'number':
       case 'range':
         displayFieldDetailsCollect(
           fieldIndex,
             '<div class="remove-value button" name="remove-value" data-id="' + fieldIndex + '" data-list-value-id="' + valueIndex + '" title="Supprimer une valeur"><i class="fa fa-trash" aria-hidden="true"></i></div>'+
           '</div>'+
         '</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
     onClickRemoveListValue( fieldIndex );
   });
+}
 // Activer la checkbox de valeur par default uniquement si une valeur est entrée
-function onInputListValueLabelEnableDefaultCheckbox( valueIndex ) {
+function onInputListValueLabelEnableDefaultCheckbox() {
+  $( '#new-fields' ).on( 'input' , '.list-value' , function() {
-  $( '.new-value[data-list-value-id="' + valueIndex + '"] .list-value' ).on( 'input' , function() {
+    var thisValue = $( this ).parent( '.new-value' );
-    if( $(this).val() !== '' ) {
+    if( '' !== $( this ).val() ) {
-      $( '.is-defaut-value[data-list-value-id="' + valueIndex + '"]' ).removeAttr( 'disabled');
+      $( '.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' );
+    }
   });
+}
+}
 // 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 () {
+    $( '.new-value[data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' ).hide( 200 , function () {
-      $(this).remove();
+      $( this ).remove();
     });
   });
+}
   $( '#new-fields input[required]' ).each( function() {
     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 === $( this).next( '.validation-warning' ).length ) {
+      if( 0 === $( this ).next( '.validation-warning' ).length ) {
-        $( this).after(
+        $( this ).after(
           '<p class="validation-warning message">' +
             '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
              '&nbsp;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 < $( this).next( '.validation-warning' ).length ) {
+      if( 0 < $( this ).next( '.validation-warning' ).length ) {
         $( this ).next( '.validation-warning' ).hide( 200 , function () {
           $( this ).remove();
         });
+      }
+    }
 // Enregistrement des valeurs à transmettre
 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 () {
     if( '' !== $( this ).val() ){
       helpFileExists = true;
+    }
   })
   // 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 ) {
       // initialisation du tableau de résultats
       // Ajout du nom du document d'aide au tableau de resultats
       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 );
-      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é
+          .attr( 'name' , 'help-' + datasToSubmit[ resultArrayIndex ].key )// l'attribut name prend la valeur de la clé
-          .css( 'position' , 'static' )// Retrouver facilement le bloc dans la page
           .appendTo( '#help-doc-submit' );
+      }
       resultArrayIndex++;
+    }
+  }
   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(
+  $( '#submit-button' ).before(
-    '<input type="hidden" name="champs-supp" id="champs-supp" value=\'' + resultsArrayJson + '\'>'
+    '<input type="hidden" name="champs-supp" id="champs-supp" value="' + resultsArrayJson + '">'
   );
+}
 // Renseigne le tableau de resultat
 // 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
+    switch( datasToSubmitObject.element ) {
       case 'select':
       case 'checkbox':
       case 'list-checkbox':
       case 'radio':
         datasToSubmitObject.fieldValues.listValue = [];
         // 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;
   $( '.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' ) ) {
+      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 ) {
         // Une seule valeur par defaut, devient la première valeur du tableau + '#'
  ************************************************/
 // 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%"' +
       '>'
     );
+  }
+}
 // 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 () {
     $taget.text( $( this ).val() );
         '</div>' +
         // Bouton 'help'
         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 + '"';
       // Autres attributs
       // Valeur Visible
       optionText  : $( this ).find('.list-value').val(),
       // 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;
+}
+  }
+}
 // 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 () {
       $( this ).remove();
       '<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( 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 ) {
       // Prévisualisation d'un champ
       $( '#zone-supp .preview-container' ).append(
 // 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' ),
+    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 );
     // 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' ) ) {
+    } else {
-        $( '#print_content' ).append( '<iframe src="' + tmppath + '" width="100%" height="650" align="middle" scrolling="no" frameborder="0"></iframe>' );
+      $( '#print_content' ).append( '<p>Erreur : le fichier n\'est pas une image</p>' );
+    }
     // Sortie avec la touche escape
     $( '#help-modal' ).modal( { keyboard : true } );
     // Affichage
   DisplayClassicFields();
   // Affichage des images ou nom des documents importés
   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();
 });

Subversion Repositories eFlore/Applications.cel

(root)/trunk/widget/modules/manager/squelettes/js/manager.js – Rev 3197 → 3226