Projet

Général

Profil

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

calebasse / calebasse / static / js / calebasse.dialog.js @ 78bae9a3

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

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

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

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

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

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

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

    
131
    });
132
  }
133

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

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

    
186
function select_add_dialog(opts, $form, form_action)
187
{
188
  var add_form = $form;
189

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

    
204
  $form.attr('action', form_action);
205
  $form.ajaxForm({success: on_success});
206
}
207

    
208
function init_magic_dialog() {
209

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

    
225
    if (opts.add_select) {
226
      select_add_dialog(opts, $form, form_action);
227
    }
228

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

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

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

    
350
(function ($) {
351
    init_magic_dialog();
352
})(window.jQuery)
(5-5/21)