Projet

Général

Profil

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

calebasse / calebasse / static / js / calebasse.dialog.js @ 2c6641c8

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) {
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 {
37
            if (redirectToUrl) {
38
              if (redirectToUrl.indexOf('#') == 0) {
39
                window.location.hash = redirectToUrl.substr(1);
40
                window.location.reload(true);
41
              } else {
42
                window.location = redirectToUrl;
43
              }
44
            } else if (redirectToUrl == false) {
45
              /* if redirectToUrl is set to false then look for the redirection
46
               * url in the actual page content.
47
               */
48
              var url = $(parse).find('#ajax-redirect').data('url');
49
              if (url) { window.location = url; }
50
            } else {
51
              window.location.reload(true);
52
            }
53
          }
54
        }
55
        $('form', this).ajaxForm({
56
          success: onsuccess,
57
        });
58
        var buttons = [{text: "Annuler",
59
                        id: "close-btn",
60
                        click: function() { $(this).dialog("close"); } },
61
                       {text:btn_submit_name,
62
                        id: "submit-btn",
63
                        click: function() {
64
                            disable_button($('#submit-btn'));
65
                            $(id + " form").submit();
66
                        }}];
67

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

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

    
102
function add_dialog(on, url, title, width, btn_text) {
103
  // function used to add patient schedules, events and acts
104

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

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

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

    
134
    });
135
  }
136

    
137
  $(on).load(url,
138
      function () {
139
        init_dialog();
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();
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)
(5-5/21)