Subversion Repositories eFlore/Applications.cel

"use strict";

/*************************************
 *  Fonctions de Style et Affichage  *
 *      des éléments "spéciaux"      *
 *************************************/

// Volet de profil/déconnexion
function connexionDprodownMenu() {
  $( '#utilisateur-connecte .volet-toggle, #profil-utilisateur a, #deconnexion a' ).click( function( event ) {
    if( $( this ).hasClass( 'volet-toggle' ) ) {
      event.preventDefault();
    }
    $( '#utilisateur-connecte .volet-menu' ).toggleClass( 'hidden' );
  });
}

// Logique d'affichage pour le input type=file
function inputFile() {
  // Initialisation des variables
  var $fileInput  = $( '.input-file' ),
      $button     = $( '.label-file' );
  // Action lorsque la "barre d'espace" ou "Entrée" est pressée
  $( '.label-file' ).keydown( function( event ) {
    if ( event.keyCode == 13 || event.keyCode == 32 ) {
      $( '#' + $( this ).attr( 'for' ) + '.input-file' ).click();
    }
  });
}

// 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
  // _ S'assurer de bien viser la bonne list-checkbox
  // _ Au click sur un autre champ remballer la list-checkbox
  $( document ).click( function( event ) {
    var target = event.target;

    if ( !$( target ).is( '.overSelect' ) && 0 === $( target ).closest( '.checkboxes' ).length ) {
      $( '.checkboxes' ).each( function () {
        $( this ).addClass( 'hidden' );
      });
      $( '.selectBox select.focus' ).each( function() {
        $( this ).removeClass( 'focus' );
      });
    }
  });
  $( '#zone-appli' ).on( 'click' , '.selectBox' , function() {
    // afficher/cacher le volet des checkboxes et focus
    $( this ).next().toggleClass( 'hidden' );
    $( this ).find( 'select' ).toggleClass( 'focus' );

    // Cacher le volet des autres checkboxes et retirer leur focus
    var $checkboxes = $( this ).next(),
        count = $( '.checkboxes' ).length;

    for ( var i = 0; i < count; i++ ) {
      if ( $( '.checkboxes' )[i] !== $checkboxes[0] && !$checkboxes.hasClass( 'hidden' ) ) {
        var $otherListCheckboxes = $( '.checkboxes' )[i];
        if ( !$otherListCheckboxes.classList.contains( 'hidden' ) ) {
          $otherListCheckboxes.classList.add( 'hidden' );
        }
        if( $otherListCheckboxes.previousElementSibling.firstElementChild.classList.contains( 'focus' ) ) {
          $otherListCheckboxes.previousElementSibling.firstElementChild.classList.remove( 'focus' );
        }
      }
    }
  });
}

// Style et affichage des input type="range"
function inputRangeDisplayNumber() {
  $( 'input[type="range"]' ).each( function() {
    $( this ).siblings( '.range-live-value' ).text( $( this ).val() );
  });
  $( '#zone-supp' ).on( 'input' , 'input[type="range"]' , function () {
    $( this ).siblings( '.range-live-value' ).text( $( this ).val() );
  });
  $( '#ajouter-obs' ).on( 'click', function() {
    $( '.range-live-value' ).each( function() {
      var $this = $( this );
      $this.text( '' );
    });
  });
}

// Activation/Desactivation et contenu de la modale Bootstrap
// https://getbootstrap.com/docs/3.3/javascript/#modals
function newFieldsHelpModal() {
  $( '#zone-appli' ).on( 'click' , '.help-button' , function ( event ) {
    var thisFieldKey = $( this ).data( 'key' ),
        fileMimeType = $( this ).data( 'mime-type' );

    // Titre
    $( '#help-modal-label' ).text( 'Aide pour : ' +  $( this ).data( 'name' ) );
    if( fileMimeType.match( 'image' ) ) {
      var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' );
      // var extention = 'jpg';
      $( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + thisFieldKey + '.' + extention + '" style="max-width:100%" alt="' + thisFieldKey + '" />' );
    }
    // Sortie avec la touche escape
    $( '#help-modal' ).modal( { keyboard : true } );
    // Affichage
    $( '#help-modal' ).modal({ show: true });
    // Remplacer l'autofocus qui ne fonctionne plus en HTML5
    // Message dans la doc de bootstrap :
    // Due to how HTML5 defines its semantics,
    // the autofocus HTML attribute has no effect in Bootstrap modals.
    // To achieve the same effect, use some custom JavaScript
    $( '#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();
    })
  });
}

// Activation/Desactivation et contenu de la modale Bootstrap
// https://getbootstrap.com/docs/3.3/javascript/#modals
function projetHelpModale() {
  $( '#info-button' ).click( function ( event ) {
    var fileMimeType = $( this ).data( 'mime-info' );

    // Titre
    $( '#help-modal-label' ).text( 'Aide du projet : ' +  $( '#titre-projet' ).text() );
    if( fileMimeType.match( 'image' ) ) {
      var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' );
      $( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + 'info.' + extention + '" style="max-width:100%" alt="info projet" />' );
    }
    // Sortie avec la touche escape
    $( '#help-modal' ).modal( { keyboard : true } );
    // Affichage
    $( '#help-modal' ).modal({ show: true });
    // Remplacer l'autofocus qui ne fonctionne plus en HTML5
    // Message dans la doc de bootstrap :
    // Due to how HTML5 defines its semantics,
    // the autofocus HTML attribute has no effect in Bootstrap modals.
    // To achieve the same effect, use some custom JavaScript
    $( '#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();
    });

  });
}


// Faire apparaitre un champ text "Autre"
function onOtherOption() {
  const PREFIX = 'collect-other-';

  // Ajouter un champ texte pour "Autre"
  function optionAdd( otherId, $target, element, dataName, dataLabel ) {
    $target.after(
      '<div class="control-group">'+
        '<label'+
          ' for="' + otherId + '"'+
          ' class="' + otherId + '"'+
        '>'+
          'Autre option "' + dataLabel.toLowerCase() + '" :'+
        '</label>'+
        '<input'+
          ' type="text"'+
          ' id="' + otherId + '"'+
          ' name="' + otherId + '"'+
          ' class="collect-other form-control"'+
          ' data-name="' + dataName + '"'+
          ' data-element="' + element + '"'+
        '>'+
      '</div>'
    );
    $( '#' + otherId ).focus();
  }

  // Supprimer un champ texte pour "Autre"
  function optionRemove( otherId ) {
    $( '.' + otherId + ', #' + otherId ).remove();
  }

  $( '#formulaire .other' ).each( function() {
    if( $( this ).hasClass( 'is-select' ) ) {
      var dataName  = $( this ).data( 'name' ),
          otherId   = PREFIX + dataName,
          dataLabel = $( '.select' ).data( 'label' );

      // Insertion du champ "Autre" après les boutons
      optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName, dataLabel );
    } else if ( $( this ).is( ':checked' ) ) {
      var dataName  = $( this ).data( 'name' ),
          otherId   = PREFIX + dataName,
          element   = $( this ).data( 'element' ),
          dataLabel = $( this ).data( 'label' );
      // Insertion du champ "Autre" après les boutons
      optionAdd( otherId, $( this ).parent( 'label' ), element, dataName, dataLabel );
    }
  });

  $( '#formulaire .select' ).change( function () {
    var dataName  = $( this ).data( 'name' ),
        otherId   = PREFIX + dataName,
        dataLabel = $( this ).data( 'label' );

    if( 'other' === $( this ).val() ) {
        // Insertion du champ "Autre" après les boutons
        optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName, dataLabel );
      } else {
        // Suppression du champ autre
        optionRemove( otherId );
        $( this ).find( '.other' ).val( 'other' );
      }
  });

  $( '#formulaire input[type=radio]' ).change( function () {
    var dataName  = $( this ).data( 'name' ),
        otherId   = PREFIX + dataName,
        dataLabel = $( this ).data( 'label' );

    if( 'other' === $( this ).val() ) {
      // Insertion du champ "Autre" après les boutons
      optionAdd( otherId, $( this ).parent( 'label' ), 'radio', dataName, dataLabel );
    } else {
      // Suppression du champ autre
      optionRemove( otherId );
      $( this ).closest( '.radio' ).find( '.other' ).val( 'other' );
    }
  });

  $( '#formulaire .list-checkbox .other, #formulaire .checkbox .other' ).click( function () {
    var dataName  = $( this ).data( 'name' ),
        otherId   = PREFIX + dataName,
        element   = $( this ).data( 'element' ),
        dataLabel = $( this ).data( 'label' );

    if( $( this ).is( ':checked' ) ) {
        // Insertion du champ "Autre" après les boutons
        optionAdd( otherId, $( this ).parent( 'label' ), element, dataName, dataLabel );
      } else {
        // Suppression du champ autre
        optionRemove( otherId );
        $( this ).val( 'other' );
      }
  });
}

function collectOtherOption() {
  $( '#formulaire' ).on( 'change', '.collect-other', function () {
    var otherIdSuffix = $( this ).data( 'name' ).replace( '[]', '' );
    var element = $( this ).data( 'element' );

    if ( '' === $( this ).val() ){
      if ( 'select' === element ) {
        $( '#' + otherIdSuffix ).find( '.other' ).prop( 'selected', false ).val( 'other' );
      } else {
        $( '#other-' + otherIdSuffix ).prop( 'checked', false ).val( 'other' );
      }
      $( 'label.collect-other-' + otherIdSuffix ).remove();
      $( this ).remove();
    } else {
      if ( 'select' === element ) {
        $( '#' +  otherIdSuffix ).find( '.other' ).val( $( this ).val() );
        $( '#' +  otherIdSuffix ).val( $( this ).val() );
        $( '#' +  otherIdSuffix + ' option').not( '.other' ).prop( 'selected', false );
        $( '#' +  otherIdSuffix ).find( '.other' ).prop( 'selected', true );
      } else {
        if ( 'radio' === element ) {
          $( 'input[name=' + otherIdSuffix + ']' ).not( '#other-' + otherIdSuffix ).prop( 'checked', false );
        }
        $( '#other-' + otherIdSuffix ).val( $( this ).val() );
        $( '#other-' + otherIdSuffix ).prop( 'checked', true );
      }
    }
  });
}

/***************************
 *  Lancement des scripts  *
 ***************************/
const CHEMIN_FICHIERS = $( '#zone-appli' ).data('url-fichiers');

jQuery( document ).ready( function() {
  // Volet de profil/déconnexion
  connexionDprodownMenu();
  // Modale "aide" du projet
  projetHelpModale();
  // Affichage input file
  inputFile();
  // Affichage des List-checkbox
  inputListCheckbox();
  // Affichage des Range
  inputRangeDisplayNumber()
  // Modale "aide"
  newFieldsHelpModal();
  // Ajout/suppression d'un champ texte "Autre"
  onOtherOption();
  // Récupérer les données entrées dans "Autre"
  collectOtherOption();
});