Subversion Repositories eFlore/Applications.cel

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
3208 idir 1
"use strict";
2
 
3
/*************************************
4
 *  Fonctions de Style et Affichage  *
5
 *      des éléments "spéciaux"      *
6
 *************************************/
7
 
3239 idir 8
// Volet de profil/déconnexion
9
function connexionDprodownMenu() {
10
  $( '#utilisateur-connecte .volet-toggle, #profil-utilisateur a, #deconnexion a' ).click( function( event ) {
11
    event.preventDefault();
12
    $( '#utilisateur-connecte .volet-menu' ).toggleClass( 'hidden' );
13
  });
14
}
15
 
3208 idir 16
// Logique d'affichage pour le input type=file
3217 idir 17
function inputFile() {
3208 idir 18
  // Initialisation des variables
19
  var $fileInput  = $( '.input-file' ),
20
      $button     = $( '.label-file' );
21
  // Action lorsque la "barre d'espace" ou "Entrée" est pressée
22
  $( '.label-file' ).keydown( function( event ) {
23
    if ( event.keyCode == 13 || event.keyCode == 32 ) {
24
      $( '#' + $( this ).attr( 'for' ) + '.input-file' ).click();
25
    }
26
  });
27
}
28
 
29
// Style et affichage des list-checkboxes
30
function inputListCheckbox() {
31
  // On écoute le click sur une list-checkbox ('.selectBox')
32
  // à tout moment de son insertion dans le dom
33
  // _ S'assurer de bien viser la bonne list-checkbox
34
  // _ Au click sur un autre champ remballer la list-checkbox
35
  $( document ).click( function( event ) {
36
    var target = event.target;
37
 
38
    if ( !$( target ).is( '.overSelect' ) && 0 === $( target ).closest( '.checkboxes' ).length ) {
39
      $( '.checkboxes' ).each( function () {
40
        $( this ).addClass( 'hidden' );
41
      });
42
      $( '.selectBox select.focus' ).each( function() {
43
        $( this ).removeClass( 'focus' );
44
      });
45
    }
46
  });
47
  $( '#zone-appli' ).on( 'click' , '.selectBox' , function() {
3240 idir 48
    // afficher/cacher le volet des checkboxes et focus
3208 idir 49
    $( this ).next().toggleClass( 'hidden' );
50
    $( this ).find( 'select' ).toggleClass( 'focus' );
51
 
3240 idir 52
    // Cacher le volet des autres checkboxes et retirer leur focus
53
    var $checkboxes = $( this ).next(),
54
        count = $( '.checkboxes' ).length;
3260 idir 55
 
3240 idir 56
    for ( var i = 0; i < count; i++ ) {
57
      if ( $( '.checkboxes' )[i] !== $checkboxes[0] && !$checkboxes.hasClass( 'hidden' ) ) {
58
        var $otherListCheckboxes = $( '.checkboxes' )[i];
59
        if ( !$otherListCheckboxes.classList.contains( 'hidden' ) ) {
60
          $otherListCheckboxes.classList.add( 'hidden' );
61
        }
62
        if( $otherListCheckboxes.previousElementSibling.firstElementChild.classList.contains( 'focus' ) ) {
63
          $otherListCheckboxes.previousElementSibling.firstElementChild.classList.remove( 'focus' );
64
        }
65
      }
66
    }
3208 idir 67
  });
68
}
69
 
70
// Style et affichage des input type="range"
71
function inputRangeDisplayNumber() {
3239 idir 72
  $( 'input[type="range"]' ).each( function() {
73
    $( this ).siblings( '.range-live-value' ).text( $( this ).val() );
3208 idir 74
  });
3239 idir 75
  $( '#zone-supp' ).on( 'input' , 'input[type="range"]' , function () {
76
    $( this ).siblings( '.range-live-value' ).text( $( this ).val() );
3208 idir 77
  });
3260 idir 78
  $( '#ajouter-obs' ).on( 'click', function() {
79
    $( '.range-live-value' ).each( function() {
80
      var $this = $( this );
81
      $this.text( '' );
82
    });
83
  });
3208 idir 84
}
85
 
86
// Activation/Desactivation et contenu de la modale Bootstrap
87
// https://getbootstrap.com/docs/3.3/javascript/#modals
3239 idir 88
function newFieldsHelpModal() {
3217 idir 89
  $( '#zone-appli' ).on( 'click' , '.help-button' , function ( event ) {
90
    var thisFieldKey = $( this ).data( 'key' ),
91
        fileMimeType = $( this ).data( 'mime-type' );
92
 
3208 idir 93
    // Titre
3217 idir 94
    $( '#help-modal-label' ).text( 'Aide pour : ' +  $( this ).data( 'name' ) );
95
    if( fileMimeType.match( 'image' ) ) {
3239 idir 96
      var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' );
97
      // var extention = 'jpg';
98
      $( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + thisFieldKey + '.' + extention + '" style="max-width:100%" alt="' + thisFieldKey + '" />' );
3208 idir 99
    }
100
    // Sortie avec la touche escape
101
    $( '#help-modal' ).modal( { keyboard : true } );
102
    // Affichage
3217 idir 103
    $( '#help-modal' ).modal({ show: true });
3208 idir 104
    // Remplacer l'autofocus qui ne fonctionne plus en HTML5
105
    // Message dans la doc de bootstrap :
106
    // Due to how HTML5 defines its semantics,
107
    // the autofocus HTML attribute has no effect in Bootstrap modals.
108
    // To achieve the same effect, use some custom JavaScript
109
    $( '#help-modal' ).on( 'shown.bs.modal' , function () {
110
      $( '#myInput' ).trigger( 'focus' );
111
    })
112
    // Réinitialisation
113
    $( '#help-modal' ).on( 'hidden.bs.modal' , function () {
114
      $( '#help-modal-label' ).text();
115
      $( '#print_content' ).empty();
116
    })
117
  });
118
}
119
 
3239 idir 120
// Activation/Desactivation et contenu de la modale Bootstrap
121
// https://getbootstrap.com/docs/3.3/javascript/#modals
122
function projetHelpModale() {
123
  $( '#info-button' ).click( function ( event ) {
124
    var fileMimeType = $( this ).data( 'mime-info' );
125
 
126
    // Titre
127
    $( '#help-modal-label' ).text( 'Aide du projet : ' +  $( '#titre-projet' ).text() );
128
    if( fileMimeType.match( 'image' ) ) {
129
      var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' );
130
      $( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + 'info.' + extention + '" style="max-width:100%" alt="info projet" />' );
131
    }
132
    // Sortie avec la touche escape
133
    $( '#help-modal' ).modal( { keyboard : true } );
134
    // Affichage
135
    $( '#help-modal' ).modal({ show: true });
136
    // Remplacer l'autofocus qui ne fonctionne plus en HTML5
137
    // Message dans la doc de bootstrap :
138
    // Due to how HTML5 defines its semantics,
139
    // the autofocus HTML attribute has no effect in Bootstrap modals.
140
    // To achieve the same effect, use some custom JavaScript
141
    $( '#help-modal' ).on( 'shown.bs.modal' , function () {
142
      $( '#myInput' ).trigger( 'focus' );
143
    })
144
    // Réinitialisation
145
    $( '#help-modal' ).on( 'hidden.bs.modal' , function () {
146
      $( '#help-modal-label' ).text();
147
      $( '#print_content' ).empty();
148
    });
149
 
150
  });
151
}
152
 
153
 
3208 idir 154
// Faire apparaitre un champ text "Autre"
155
function onOtherOption() {
156
  const PREFIX = 'collect-other-';
157
 
158
  // Ajouter un champ texte pour "Autre"
3260 idir 159
  function optionAdd( otherId, $target, element, dataName ) {
3208 idir 160
    $target.after(
3260 idir 161
      '<div class="control-group">'+
162
        '<label'+
163
          ' for="' + otherId + '"'+
164
          ' class="' + otherId + '"'+
165
        '>'+
166
          'Autre option :'+
167
        '</label>'+
168
        '<input'+
169
          ' type="text"'+
170
          ' id="' + otherId + '"'+
171
          ' name="' + otherId + '"'+
172
          ' class="collect-other form-control"'+
173
          ' data-name="' + dataName + '"'+
174
          ' data-element="' + element + '"'+
175
        '>'+
176
      '</div>'
3208 idir 177
    );
3260 idir 178
    $( '#' + otherId ).focus();
3208 idir 179
  }
180
 
181
  // Supprimer un champ texte pour "Autre"
3260 idir 182
  function optionRemove( otherId ) {
3208 idir 183
    $( '.' + otherId + ', #' + otherId ).remove();
184
  }
185
 
186
  $( '#form-supp .other' ).each( function() {
187
    if( $( this ).hasClass( 'is-select' ) ) {
3260 idir 188
      var dataName = $( this ).data( 'name' ),
189
          otherId  = PREFIX + dataName;
190
 
3208 idir 191
      // Insertion du champ "Autre" après les boutons
3260 idir 192
      optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName );
3208 idir 193
    } else if ( $( this ).is( ':checked' ) ) {
3260 idir 194
      var dataName = $( this ).data( 'name' ),
195
          otherId  = PREFIX + dataName,
196
          element = $( this ).data( 'element' );
3208 idir 197
      // Insertion du champ "Autre" après les boutons
3260 idir 198
      optionAdd( otherId, $( this ).parent( 'label' ), element, dataName );
3208 idir 199
    }
200
  });
201
 
3260 idir 202
  $( '#form-supp .select' ).change( function () {
203
    var dataName = $( this ).data( 'name' ),
204
        otherId  = PREFIX + dataName;
3208 idir 205
 
206
    if( 'other' === $( this ).val() ) {
207
        // Insertion du champ "Autre" après les boutons
3260 idir 208
        optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName );
3208 idir 209
      } else {
210
        // Suppression du champ autre
3260 idir 211
        optionRemove( otherId );
3208 idir 212
        $( this ).find( '.other' ).val( 'other' );
213
      }
214
  });
215
 
216
  $( '#form-supp input[type=radio]' ).change( function () {
3260 idir 217
    var dataName = $( this ).data( 'name' ),
218
        otherId  = PREFIX + dataName;
3208 idir 219
 
220
    if( 'other' === $( this ).val() ) {
3260 idir 221
      // Insertion du champ "Autre" après les boutons
222
      optionAdd( otherId, $( this ).parent( 'label' ), 'radio', dataName );
3208 idir 223
    } else {
224
      // Suppression du champ autre
3260 idir 225
      optionRemove( otherId );
226
      $( this ).closest( '.radio' ).find( '.other' ).val( 'other' );
3208 idir 227
    }
228
  });
229
 
230
  $( '#form-supp .list-checkbox .other, #form-supp .checkbox .other' ).click( function () {
3260 idir 231
    var dataName = $( this ).data( 'name' ),
232
        otherId  = PREFIX + dataName,
233
        element = $( this ).data( 'element' );
234
 
3208 idir 235
    if( $( this ).is( ':checked' ) ) {
236
        // Insertion du champ "Autre" après les boutons
3260 idir 237
        optionAdd( otherId, $( this ).parent( 'label' ), element, dataName );
3208 idir 238
      } else {
239
        // Suppression du champ autre
3260 idir 240
        optionRemove( otherId );
3208 idir 241
        $( this ).val( 'other' );
242
      }
243
  });
244
}
245
 
246
function collectOtherOption() {
247
  $( '#form-supp' ).on( 'change', '.collect-other', function () {
3260 idir 248
    var otherIdSuffix = $( this ).data( 'name' ).replace( '[]', '' );
249
    var element = $( this ).data( 'element' );
250
 
3208 idir 251
    if ( '' === $( this ).val() ){
252
      if ( 'select' === element ) {
3260 idir 253
        $( '#' + otherIdSuffix ).find( '.other' ).prop( 'selected', false ).val( 'other' );
3208 idir 254
      } else {
3260 idir 255
        $( '#other-' + otherIdSuffix ).prop( 'checked', false ).val( 'other' );
3208 idir 256
      }
3260 idir 257
      $( 'label.collect-other-' + otherIdSuffix ).remove();
258
      $( this ).remove();
3208 idir 259
    } else {
260
      if ( 'select' === element ) {
261
        $( '#' +  otherIdSuffix ).find( '.other' ).val( $( this ).val() );
3260 idir 262
        $( '#' +  otherIdSuffix ).val( $( this ).val() );
3208 idir 263
        $( '#' +  otherIdSuffix + ' option').not( '.other' ).prop( 'selected', false );
264
        $( '#' +  otherIdSuffix ).find( '.other' ).prop( 'selected', true );
265
      } else {
266
        if ( 'radio' === element ) {
267
          $( 'input[name=' + otherIdSuffix + ']' ).not( '#other-' + otherIdSuffix ).prop( 'checked', false );
268
        }
269
        $( '#other-' + otherIdSuffix ).val( $( this ).val() );
270
        $( '#other-' + otherIdSuffix ).prop( 'checked', true );
271
      }
272
    }
273
  });
274
}
275
 
276
/***************************
277
 *  Lancement des scripts  *
278
 ***************************/
3239 idir 279
const CHEMIN_FICHIERS = $( '#zone-appli' ).data('url-fichiers');
280
 
3208 idir 281
jQuery( document ).ready( function() {
3239 idir 282
  // Volet de profil/déconnexion
283
  connexionDprodownMenu();
284
  // Modale "aide" du projet
285
  projetHelpModale();
286
  // Affichage input file
3217 idir 287
  inputFile();
288
  // Affichage des List-checkbox
3208 idir 289
  inputListCheckbox();
3239 idir 290
  // Affichage des Range
291
  inputRangeDisplayNumber()
3217 idir 292
  // Modale "aide"
3239 idir 293
  newFieldsHelpModal();
3217 idir 294
  // Ajout/suppression d'un champ texte "Autre"
3208 idir 295
  onOtherOption();
3239 idir 296
  // Récupérer les données entrées dans "Autre"
3208 idir 297
  collectOtherOption();
298
});