Projet

Général

Profil

Télécharger (12,4 ko) Statistiques
| Branche: | Tag: | Révision:

calebasse / calebasse / static / js / calebasse.dialog.js @ 37cdace1

1

    
2
function disable_button(button) {
3
  var $button = $(button);
4
  old_background_image = $button.css('background-image');
5
  old_background_repeat = $button.css('background-repeat');
6
  $button.data('old_background_image', old_background_image);
7
  $button.data('old_background_repeat', old_background_repeat);
8
  $button.attr('disabled', 'disabled');
9
  $button.css('background-image', 'url(/static/images/throbber.gif), ' + old_background_image);
10
  $button.css('background-repeat', 'no-repeat, ' + old_background_repeat);
11
}
12

    
13
function enable_button(button) {
14
  var $button = $(button);
15
  $button.css('background-image', $button.data('old_background_image'));
16
  $button.css('background-repeat', $button.data('old_background_repeat'));
17
  $button.removeAttr('disabled');
18
}
19

    
20
function init_dialog(id) {
21
    init_datepickers(id);
22
    $('#id_description', id).attr('rows', '3');
23
    $('#id_description', id).attr('cols', '30');
24
    var deck = $('#id_participants_on_deck', id);
25
    $(deck).bind('added', function() {
26
      var added = $(deck).find('div:last');
27
      var t = added.attr('id').indexOf('_group:');
28
      if ( t == -1) return;
29

    
30
      /* remove group element and fake id */
31
      added.remove();
32
      var val = $('#id_participants').val();
33
      $('#id_participants').val(val.substr(0, val.substr(0, val.length-1).lastIndexOf('|')+1));
34

    
35
      /* add all workers */
36
      var query = added.attr('id').substr(t+1);
37
      var receive_result = $('#id_participants_text', id).autocomplete('option', 'select');
38
      $.getJSON($('#id_participants_text', id).autocomplete('option', 'source') + '?term=' + query,
39
        function(data) {
40
          $.each(data, function(key, val) {
41
            if (key==0) return; /* ignore first element as it's the group itself */
42
            var ui = Object();
43
            ui.item = val;
44
            receive_result(null, ui);
45
          });
46
        });
47
    });
48
}
49

    
50
function generic_ajaxform_dialog(url, title, id, width, btn_submit_name, redirectToUrl, on_load_callback, height, extra_button, replace_content) {
51
  if (! height)
52
    height = 'auto';
53
  $(id).load(url,
54
      function () {
55
        init_dialog(id);
56
        function onsuccess(response, status, xhr, form) {
57
          enable_button($('#submit-btn'));
58
          var parse = $(response);
59
          if ($('.errorlist', parse).length != 0) {
60
            $(id).html(response);
61
            on_load_callback($(id));
62
            $(id + ' form').ajaxForm({
63
              success: onsuccess,
64
            });
65
          } else if(replace_content) {
66
              $('body').html(parse);
67
          } else {
68
            if (redirectToUrl) {
69
              if (redirectToUrl.indexOf('#') == 0) {
70
                window.location.hash = redirectToUrl.substr(1);
71
                window.location.reload(true);
72
              } else {
73
                window.location = redirectToUrl;
74
              }
75
            } else if (redirectToUrl == false) {
76
              /* if redirectToUrl is set to false then look for the redirection
77
               * url in the actual page content.
78
               */
79
              var url = $(parse).find('#ajax-redirect').data('url');
80
              if (url) { window.location = url; }
81
            } else {
82
              window.location.reload(true);
83
            }
84
          }
85
        }
86
        $('form', this).ajaxForm({
87
          success: onsuccess,
88
        });
89
        var buttons = [{text: "Annuler",
90
                        id: "close-btn",
91
                        click: function() { $(this).dialog("close"); } },
92
                       {text:btn_submit_name,
93
                        id: "submit-btn",
94
                        click: function() {
95
                            disable_button($('#submit-btn'));
96
                            $(id + " form").submit();
97
                        }}];
98

    
99
        if (extra_button)
100
            buttons.push(extra_button);
101
        $(this).dialog({title: title,
102
          modal: true,
103
          width: width,
104
          height: height,
105
          buttons: buttons});
106
        if (on_load_callback) {
107
          on_load_callback($(this));
108
        }
109
      });
110
}
111

    
112
/**
113
 * Transform form(s) to ajax forms
114
 * id: jQuery id where you want to replace form by ajaxForm
115
*/
116
function calebasse_ajax_form(id) {
117
  var selector = id + ' form';
118
  function onsuccess(response, status, xhr, form) {
119
    if ($('.errorlist', response).length != 0) {
120
      $(id).parent().html(response);
121
      $(selector).ajaxForm({
122
        success: onsuccess,
123
      });
124
    }
125
    else {
126
      window.location.reload(true);
127
    }
128
  }
129
  $(selector).ajaxForm({
130
    success: onsuccess,
131
  });
132
}
133

    
134
function add_dialog(on, url, title, width, btn_text) {
135
  // function used to add patient schedules, events and acts
136

    
137
  $(on).load(url,
138
      function () {
139
        init_dialog(on);
140
        var old_background_image, old_background_repeat, $button;
141
        var in_submit = false;
142
        $(on).unbind('submit');
143
        $(on).submit(function(event) {
144
          /* stop form from submitting normally */
145
          event.preventDefault();
146

    
147
          var $form = $('form', this);
148
          $.post($form.attr('action'), $form.serialize(),
149
            function (data) {
150
              var parse = $(data);
151
              $button.css('background-image', old_background_image);
152
              $button.css('background-repeat', old_background_repeat);
153
              $button.removeAttr('disabled');
154
              if ($('.errorlist', parse).length != 0) {
155
                $(on).html(data);
156
                init_dialog(on);
157
              } else {
158
                $('body').html(data);
159
              }
160
              in_submit = false;
161
            },
162
            "html");
163
        });
164
        var submit = function (ev) {
165
          if (in_submit) {
166
            return;
167
          }
168
          in_submit = true;
169
          $button = $(ev.target).parent();
170
          old_background_image = $button.css('background-image');
171
          old_background_repeat = $button.css('background-repeat');
172
          $button.attr('disabled', 'disabled');
173
          $button.css('background-image', 'url(/static/images/throbber.gif), ' + old_background_image);
174
          $button.css('background-repeat', 'no-repeat, ' + old_background_repeat);
175
          $(on + " form").submit();
176
        };
177
        $(this).dialog({title: title,
178
          modal: true,
179
          width: width,
180
          buttons: [
181
        { text: btn_text,
182
          click: submit }
183
        ],
184
          close: function() {},
185
        });
186
      });
187
}
188

    
189
function select_add_dialog(opts, $form, form_action)
190
{
191
  var add_form = $form;
192

    
193
  function on_success(response, status, xhr, form) {
194
    var parsed_response= $(response);
195
    if ($('.errorlist', parsed_response).length != 0) {
196
      $(add_form).html($(parsed_response).find('#form-content'));
197
    } else {
198
      new_id = $('.new-object .col-id', parsed_response).text();
199
      new_label = $('.new-object .col-label', parsed_response).text();
200
      $(opts.add_select).append('<option value="' + new_id + '">' + new_label + '</option>');
201
      $(opts.add_select).val(new_id);
202
      $(opts.add_select).trigger('change');
203
      $(add_form).parent().dialog('close');
204
    }
205
  }
206

    
207
  $form.attr('action', form_action);
208
  $form.ajaxForm({success: on_success});
209
}
210

    
211
function init_magic_dialog() {
212

    
213
  $.fn.dialogButton = function (opts) {
214
    var id = $(this).attr('id');
215
    this.on('click', function () {
216
      var $dialog = $('<div id="dialog-' + (opts.name || id) +
217
        '" title="' + opts.title + '"><form class="inline-form" method="post"></form></div>');
218
    var default_button = opts.default_button == undefined ? 'Envoyer' : opts.default_button;
219
    var form_action = opts.url.split(' ')[0];
220
    var $form = $('form', $dialog);
221
    $dialog.appendTo('#dialogs');
222
    if (opts.next_url) {
223
      $form.attr('action', form_action + '?next_url=' + opts.next_url);
224
    } else {
225
      $form.attr('action', form_action);
226
    }
227

    
228
    if (opts.add_select) {
229
      select_add_dialog(opts, $form, form_action);
230
    }
231

    
232
    var buttons = [
233
    {
234
      text: 'Annuler',
235
      click: function () {
236
        $(this).dialog('close');
237
      }
238
    },
239
    {
240
      text: default_button,
241
      click: function () {
242
        $form.submit();
243
      }
244
    },
245
    ];
246
    $dialog.css('max-height', $(window).height() - 200);
247
    $form.load(opts.url, function () {
248
      $dialog.dialog({
249
        modal: opts.modal == undefined ? true : opts.modal,
250
        width: 900,
251
        maxHeight: $(window).height() - 100,
252
        buttons: buttons,
253
        close: function () {
254
          $(this).remove();
255
        }
256
      });
257
    });
258
    })
259
  };
260
  $(function () {
261
    window.calebasse_dialogs = function(base) {
262

    
263
      var base = base || $('body').get(0);
264
      $('.dialog-button', base).each(function (i, button) {
265
        var $button = $(button);
266
        $button.dialogButton({
267
          url: $button.data('url') || $button.closest('a').attr('href'),
268
          default_button: $button.data('default-button') || $button.text(),
269
          title: $button.attr('title') || $button.text(),
270
          next_url: $button.data('next-url') || false,
271
          add_select: $button.data('add-select') || false
272
        });
273
      });
274

    
275
      /* Form buttons with the '.enable-on-change' class are only enabled if an
276
       * input or a select of the form is modified. */
277
      $('form button.enable-on-change, form input[type="submit"]:not(".login")', base).prop('disabled', 'true');
278
      $('form input, form select, form textarea', base).on('change', function () {
279
        var form = $(this).closest('form');
280
        $('button.enable-on-change, form input[type="submit"]', form).enable();
281
      })
282
      $('form input, form textarea', base).on('keyup', function () {
283
        var form = $(this).closest('form');
284
        $('button.enable-on-change, form input[type="submit"]', form).enable();
285
      })
286
      $('form.form-with-confirmation', base).on('submit', function () {
287
        var mesg = $(this).data('confirmation-msg') || "Êtes-vous sûr ?";
288
        return window.confirm(mesg);
289
      });
290
      $('form .datepicker', base).each(function (i, span) {
291
        var $span = $(span);
292
        var $input = $('input', span);
293
        var months = $span.data('number-of-months');
294
        var before_selector = $span.data('before-selector');
295
        var after_selector = $span.data('after-selector');
296
        $input.datepicker({dateFormat: 'd/m/yy', showOn: 'button' });
297
        if (months) {
298
          $input.datepicker("option", "numberOfMonths", months);
299
        }
300
        if (before_selector) {
301
          var $before_target = $('input', $(before_selector));
302
          $input.datepicker("option", "maxDate", $before_target.val());
303
          $input.datepicker("option", "onClose", function (selectedDate) {
304
            $before_target.datepicker( "option", "minDate", selectedDate );
305
          });
306
        }
307
        if (after_selector) {
308
          var $after_target = $('input', $(after_selector));
309
          $input.datepicker("option", "minDate", $after_target.val());
310
          $input.datepicker("option", "onClose", function (selectedDate) {
311
            $after_target.datepicker( "option", "maxDate", selectedDate );
312
          });
313
        }
314
      });
315
      $('form .reset', base).on('click', function () {
316
        var $this = $(this);
317
        var $form = $($this.closest('form'));
318
        $('input', $form).val('');
319
      });
320
      $('body').on('focus', 'form .datepicker input', function (e) {
321
        var $input = $(e.target);
322
        var $span = $($input.closest('.datepicker'));
323
        var months = $span.data('number-of-months');
324
        var before_selector = $span.data('before-selector');
325
        var after_selector = $span.data('after-selector');
326
        if ($input.is('.hasDatepicker')) {
327
          return true;
328
        }
329
        $input.datepicker({dateFormat: 'd/m/yy', showOn: 'button' });
330
        if (months) {
331
          $input.datepicker("option", "numberOfMonths", months);
332
        }
333
        if (before_selector) {
334
          var $before_target = $('input', $(before_selector));
335
          $input.datepicker("option", "maxDate", $before_target.val());
336
          $input.datepicker("option", "onClose", function (selectedDate) {
337
            $before_target.datepicker( "option", "minDate", selectedDate );
338
          });
339
        }
340
        if (after_selector) {
341
          var $after_target = $('input', $(after_selector));
342
          $input.datepicker("option", "minDate", $after_target.val());
343
          $input.datepicker("option", "onClose", function (selectedDate) {
344
            $after_target.datepicker( "option", "maxDate", selectedDate );
345
          });
346
        }
347
      });
348
    };
349
    window.calebasse_dialogs();
350
  });
351
}
352

    
353
(function ($) {
354
    init_magic_dialog();
355
})(window.jQuery)
(6-6/23)