Projet

Général

Profil

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

calebasse / calebasse / static / js / calebasse.dialog.js @ b057fff0

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 generic_ajaxform_dialog(url, title, id, width, btn_submit_name, redirectToUrl, on_load_callback, height, extra_button, replace_content) {
21
  if (! height)
22
    height = 'auto';
23
  $(id).load(url,
24
      function () {
25
        $('.datepicker-date').datepicker({dateFormat: 'd/m/yy', showOn: 'button'});
26
        $('.datepicker input').datepicker({dateFormat: 'd/m/yy', showOn: 'button'});
27
        function onsuccess(response, status, xhr, form) {
28
          enable_button($('#submit-btn'));
29
          var parse = $(response);
30
          if ($('.errorlist', parse).length != 0) {
31
            $(id).html(response);
32
            on_load_callback($(id));
33
            $(id + ' form').ajaxForm({
34
              success: onsuccess,
35
            });
36
          } else if(replace_content) {
37
              $('body').html(parse);
38
          } else {
39
            if (redirectToUrl) {
40
              if (redirectToUrl.indexOf('#') == 0) {
41
                window.location.hash = redirectToUrl.substr(1);
42
                window.location.reload(true);
43
              } else {
44
                window.location = redirectToUrl;
45
              }
46
            } else if (redirectToUrl == false) {
47
              /* if redirectToUrl is set to false then look for the redirection
48
               * url in the actual page content.
49
               */
50
              var url = $(parse).find('#ajax-redirect').data('url');
51
              if (url) { window.location = url; }
52
            } else {
53
              window.location.reload(true);
54
            }
55
          }
56
        }
57
        $('form', this).ajaxForm({
58
          success: onsuccess,
59
        });
60
        var buttons = [{text: "Annuler",
61
                        id: "close-btn",
62
                        click: function() { $(this).dialog("close"); } },
63
                       {text:btn_submit_name,
64
                        id: "submit-btn",
65
                        click: function() {
66
                            disable_button($('#submit-btn'));
67
                            $(id + " form").submit();
68
                        }}];
69

    
70
        if (extra_button)
71
            buttons.push(extra_button);
72
        $(this).dialog({title: title,
73
          modal: true,
74
          width: width,
75
          height: height,
76
          buttons: buttons});
77
        if (on_load_callback) {
78
          on_load_callback($(this));
79
        }
80
      });
81
}
82

    
83
/**
84
 * Transform form(s) to ajax forms
85
 * id: jQuery id where you want to replace form by ajaxForm
86
*/
87
function calebasse_ajax_form(id) {
88
  var selector = id + ' form';
89
  function onsuccess(response, status, xhr, form) {
90
    if ($('.errorlist', response).length != 0) {
91
      $(id).parent().html(response);
92
      $(selector).ajaxForm({
93
        success: onsuccess,
94
      });
95
    }
96
    else {
97
      window.location.reload(true);
98
    }
99
  }
100
  $(selector).ajaxForm({
101
    success: onsuccess,
102
  });
103
}
104

    
105
function add_dialog(on, url, title, width, btn_text) {
106
  // function used to add patient schedules, events and acts
107

    
108
  function init_dialog() {
109
    $('.datepicker-date').datepicker({dateFormat: 'd/m/yy', showOn: 'button'});
110
    $('.datepicker input').datepicker({dateFormat: 'd/m/yy', showOn: 'button'});
111
    $('#id_description').attr('rows', '3');
112
    $('#id_description').attr('cols', '30');
113
    var deck = $('#id_participants_on_deck');
114
    $(deck).bind('added', function() {
115
      var added = $(deck).find('div:last');
116
      var t = added.attr('id').indexOf('_group:');
117
      if ( t == -1) return;
118

    
119
      /* remove group element and fake id */
120
      added.remove();
121
      var val = $('#id_participants').val();
122
      $('#id_participants').val(val.substr(0, val.substr(0, val.length-1).lastIndexOf('|')+1));
123

    
124
      /* add all workers */
125
      var query = added.attr('id').substr(t+1);
126
      var receive_result = $('#id_participants_text').autocomplete('option', 'select');
127
      $.getJSON($('#id_participants_text').autocomplete('option', 'source') + '?term=' + query,
128
        function(data) {
129
          $.each(data, function(key, val) {
130
            if (key==0) return; /* ignore first element as it's the group itself */
131
            var ui = Object();
132
            ui.item = val;
133
            receive_result(null, ui);
134
          });
135
        });
136

    
137
    });
138
  }
139

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

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

    
192
function select_add_dialog(opts, $form, form_action)
193
{
194
  var add_form = $form;
195

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

    
210
  $form.attr('action', form_action);
211
  $form.ajaxForm({success: on_success});
212
}
213

    
214
function init_magic_dialog() {
215

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

    
231
    if (opts.add_select) {
232
      select_add_dialog(opts, $form, form_action);
233
    }
234

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

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

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

    
356
(function ($) {
357
    init_magic_dialog();
358
})(window.jQuery)
(5-5/22)