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

       case 'checkbox':
       case 'list-checkbox':
       case 'radio':
         displayFieldDetailsCollect(
           fieldIndex,
+          '<p class="message element-message">' +
+            '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> ' +
-          '<p class="message">Ajoutez les valeurs de \"' + $( this ).children( 'option:selected' ).text() + '\"</p>'+
+            'Entrez au moins une valeur de ' + $( this ).children( 'option:selected' ).text() +
+          '</p>'+
+          // Première option
+          '<div class="new-value" data-list-value-id="' + valueIndex +'">'+
+            // Recueil d'une valeur de la liste
+            '<label for="list-value">Valeur *:</label>'+
+            '<input type="text" name="list-value" data-id="' + fieldIndex + '" class="list-value" data-list-value-id="' + valueIndex +'" placeholder="Une des valeurs de la liste" required>'+
+            // Checkbox valeur par défaut
+            '<label for="is-defaut-value" title="Ceci est la valeur par défaut">Valeur par défaut</label>'+
+            '<input type="checkbox" name="is-defaut-value" data-id="' + fieldIndex + '" class="is-defaut-value" title="entrez une valeur pour activer cette case" data-list-value-id="' + valueIndex +'" disabled >'+
+          '</div>' +
           // Bouton ajout d'une valeur à la liste
           '<label for="add-value" class="add-value" data-id="' + fieldIndex + '" title="Ajouter une valeur à la liste">Ajouter une valeur</label>'+
           '<div class="button add-value-button" name="add-value" data-id="' + fieldIndex + '" title="Ajouter une valeur à la liste"><i class="fa fa-puzzle-piece" aria-hidden="true"></i></div>'+
           // checkbox ajouter une valeur "Autre:"
           '<label for="option-other-value" title="Ajouter une option \'Autre:\' à la fin">Valeur "Autre"</label>'+
 /**** Ajout des valeurs (options) des "champs de listes" (select, checkbox, radio, etc.) ****/
 // Ajout des options des listes (deroulantes, cases à cocher etc.)
 function onClickAddNewValueToList( fieldIndex , valueIndex ) {
+  $( '.add-value-button[data-id="' + fieldIndex + '"]' ).click( function() {
-  $( '.add-value-button[data-id="' + fieldIndex + '"]' ).click( function() {
+    valueIndex++;
     $( '.add-value[data-id="' + fieldIndex + '"]' ).before(
       '<div class="new-value" data-list-value-id="' + valueIndex +'">'+
         // Recueil d'une valeur de la liste
         '<label for="list-value">Valeur  *:</label>'+
     onInputListValueLabelEnableDefaultCheckbox( valueIndex );
     // Une seule valeur par défaut pour select et radio
     onClickDefaultValueRemoveOthers( fieldIndex );
     // Supprimer une valeur
     onClickRemoveListValue( fieldIndex );
-    valueIndex++;
   });
+}
 // Activer la checkbox de valeur par default uniquement si une valeur est entrée
               // 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' );
+                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>'
               ' 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' );
+        $( '#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' );
+          $( this ).removeClass( 'invalid-key' );
         });
-        $( '#preview-field , #validate-new-fields' ).removeClass( 'invalid' );
+        $( '#preview-field , #validate-new-fields' ).removeClass( 'invalid-key' );
         // messages d'alerte
         $( '.invalid-field-key' ).each( function() {
           $( this ).hide( 200 , function () {
             $( this ).remove();
           });
       notUnique = false;
     });
+  }
+}
-//Activation/Désactivation des boutons valider/prévisualiser
+// Activation/desactivation des champs valider/previsualiser
-function activatePreviewAndValidateButtons() {
-  var invalidElementInfos = false, // true si aucune option n'a été entrée pour un élément de liste (select, radio, etc.)
-      invalidTextInfos    = false; // true si au moins un input required n'est pas renseigné
-  // Clique sur le bouton prévisualiser ou valider
+function onClickButtonsTagMissingValues() {
+  $( '#preview-field , #validate-new-fields' ).on( 'click' , function() {
-  $('#preview-field , #validate-new-fields').on( 'click' , function() {
+    var $button = $( this );
-    // S'il n'y a pas (plus) de bloc nouveau champ
+    //S'il n'y a pas (plus) de bloc nouveau champ
     if( 0 === $( 'fieldset' ).length ) {
       return;
-    }
-    var count = $( 'fieldset' ).last().attr('data-id');
-    // si on a déjà des avertissements on les supprime
-    if( 0 < $( '.validation-warning' ).length ) {
+    }
-      // Supprimer les messages
-      $( '.validation-warning' ).each( function() {
-        $( this ).hide( 200 , function () {
+    // Classe "invalid"
-          $( this ).remove();
-        });
-      });
-      // Supprimer les bordures en rouge vif
-      $('.add-value-button , input[required]' ).each( function() {
+    missingValuesClass();
-        $( this ).removeClass( 'invalid' );
-      });
-    }
-    // Parcourir tous les blocs d'infos de champs supplémentaires
-    for( var index = $( 'fieldset' ).first().attr('data-id') ; index <= count ; index++ ) {
-      var thisFieldset = $( 'fieldset[data-id="' + index + '"]');
-      // Certains indices peuvent correspondre à un champ supprimé
+    if( !$( this ).hasClass( 'invalid' ) ) {
-      if( 0 < $( thisFieldset ).length ) {
+      if( $( this ).is( '#validate-new-fields') ) {
-        var $fieldElement    = $( '.field-element' , thisFieldset ),
+        // Lancement de l'enregistrement des valeurs à transmettre
-            fieldElementVal  = $fieldElement.val(),
-            isList           = ( // true si c'est un élément "liste"
+        onClickStoreNewFields();
-              fieldElementVal === 'list-checkbox' ||
-              fieldElementVal === 'checkbox'      ||
-              fieldElementVal === 'radio'         ||
+      } else if( $( this ).is( '#preview-field') ) {
-              fieldElementVal === 'select'
-            );
-        // Si aucune option n'a été créée pour un élément "liste"
-        if( isList && 0 === $( '.list-value' , thisFieldset ).length ) {
+        // Lancement de la prévisualisation
-          invalidElementInfos = true;
-          // Le bouton "Ajouter une valeur" est signalé en rouge
-          $( '.add-value-button' , thisFieldset ).addClass( 'invalid' );
         newFieldsPreview();
+      }
+    }
-    }
+  });
+  // Si un champ manquant est renseigné
+  // ou on choisit nouvel élément liste (au moins une option)
-    // Si au moins un champ "required" n'est pas rempli
+  // Cette action doit être prise en compte dans la validation
-    $( 'input[required]' , thisFieldset ).each( function() {
+  $( '#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( 0 === $( this ).val().length ) {
+    if( $( this ).is( '.field-element' ) && !$( '#preview-field , #validate-new-fields' ).hasClass( 'invalid' ) ) {
+      return;
-        invalidTextInfos = true;
+    } else {
-        // Le champ est signalé en rouge
+      // Classe "invalid"
-        $( this ).addClass( 'invalid' );
+      missingValuesClass();
-      }
+    }
+  });
+}
-    });
-    // Si la saisie est invalide
+// Classe "invalid"
-    if( invalidElementInfos ||  invalidTextInfos ) {
+function missingValuesClass() {
-      // Désactivation des boutons valider et prévisualiser
+  // Si au moins un champ "required" n'est pas rempli
-      $( '#preview-field , #validate-new-fields' ).addClass( 'invalid' );
-      // Message pour les options des "listes"
+  $( '#new-fields input[required]' ).each( function() {
-      if( invalidElementInfos ) {
+    if( 0 === $( this ).val().length ) {
-        $( '#new-fields' ).after(
+      // Le champ est signalé en rouge
-          '<p class="validation-warning message">' +
-            '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
-             '&nbsp;Vérifiez les boutons<br>"<i class="fa fa-puzzle-piece" aria-hidden="true" style="color:#4bbacb"></i>&nbsp;Ajouter une valeur" signalés en rouge:' +
-             ' il faut au moins une valeur pour les éléments "menu déroulant", "boutons radio", "cases à cocher" ou "liste de cases à cocher", ' +
-          '</p>'
-        );
-      }
+      $( this ).addClass( 'invalid' );
-      // Message pour les champs
+      // Un message d'alerte apparait après le champ
-      if( invalidTextInfos ) {
+      if( 0 === $( this).next( '.validation-warning' ).length ) {
-        $( '#new-fields' ).after(
+        $( this).after(
           '<p class="validation-warning message">' +
-            '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
-             '&nbsp;Des informations sont manquantes pour certains champs,' +
+            '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
-             ' vérifiez ceux signalés en rouge' +
+             '&nbsp;Ce champ est requis' +
           '</p>'
         );
+      }
     } else {
-      $( '#preview-field , #validate-new-fields' ).removeClass( 'invalid' );
+      // Le champ est signalé en rouge
-      if( $( this ).is( '#validate-new-fields') ) {
+      $( this ).removeClass( 'invalid' );
-        // Lancement de l'enregistrement des valeurs à transmettre
+      // Le message d'alerte du champ est supprimé
-        onClickStoreNewFields();
+      if( 0 < $( this).next( '.validation-warning' ).length ) {
-      } else if( $( this ).is( '#preview-field') ) {
+        $( this ).next( '.validation-warning' ).hide( 200 , function () {
-        // Lancement de la prévisualisation
+          $( this ).remove();
-        newFieldsPreview();
+        });
+      }
-    }
-    // Réinitialisation des drapeaux de saisie invalide
-    invalidElementInfos = false;
     invalidTextInfos    = false;
+  });
+  // Si on a des champs à compléter
+  if( 0 < $( '.invalid[type="text"]' ).length ) {
+    // Les boutons sont signalés en rouge
+    $( '#preview-field , #validate-new-fields' ).addClass( 'invalid' );
+    // Un message d'alerte apparait avant les boutons
+    if( 0 === $( '#new-fields' ).next( '.validation-warning' ).length ) {
+      $( '#new-fields' ).after(
+        '<p class="validation-warning message">' +
+          '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
+           '&nbsp;Des informations sont manquantes pour certains champs,' +
+           ' vérifiez ceux signalés en rouge' +
+        '</p>'
+      );
+    }
+  } else {
+    // Les signalements et messages sont supprimés
+    $( '#preview-field , #validate-new-fields' ).removeClass( 'invalid' );
+    $( '#new-fields' ).next( '.validation-warning' ).hide( 200 , function () {
+        $( this ).remove();
+    });
   });
+}
 // Enregistrement des valeurs à transmettre
   // 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>' );
+  }
   // On déroule les blocs de champs supplémentaires
   for( var index = $( 'fieldset' ).first().attr('data-id') ; index <= count ; index++ ) {
     var thisFieldset = $( 'fieldset[data-id="' + index + '"]');
     // Certains indices peuvent correspondre à un champ supprimé
     if( 0 < $( thisFieldset ).length ) {
   // Identifiant de champ
   var fieldIndex = 0;
   // Ajout de nouveaux champs
   onClickAddNewFields( fieldIndex );
   // Activation/Desactivation des boutons valider et prévisualiser
-  activatePreviewAndValidateButtons();
+  onClickButtonsTagMissingValues();
   // Prévisualisation des champs classiques
   DisplayClassicFields();
   // Affichage des images ou nom des documents importés
   inputFile();
   // Affichage des List-checkbox

Subversion Repositories eFlore/Applications.cel

(root)/trunk/widget/modules/manager/squelettes/js/manager.js – Rev 3187 → 3188