Merge pull request #3 from prmtl/master
[wolnelektury.git] / wolnelektury / static / js / dialogs.js
1 (function($) {
2     $(function() {
3
4         // create containers for all ajaxable form links
5         $('.ajaxable').each(function() {
6             var $window = $("#ajaxable-window").clone();
7             $window.attr("id", this.id + "-window");
8             $('body').append($window);
9
10             var $trigger = $(this)
11             var trigger = '#' + this.id;
12
13             $window.jqm({
14                 ajax: '@href',
15                 ajaxText: '<p><img src="' + STATIC_URL + 'img/indicator.gif" alt="*"/> ' + gettext("Loading") + '</p>',
16                 target: $('.target', $window)[0],
17                 overlay: 60,
18                 trigger: trigger,
19                 onShow: function(hash) {
20                     var offset = $(hash.t).offset();
21                     hash.w.css({position: 'absolute', left: offset.left - hash.w.width() + $(hash.t).width(), top: offset.top});
22                     var width = $(hash.t).width();
23                     width = width > 50 ? width : 50;
24                     $('.header', hash.w).css({width: width});
25                     hash.w.show();
26                 },
27                 onLoad: function(hash) {
28                     $('form', hash.w).ajaxForm({
29                         dataType: 'json',
30                         target: $('.target', $window),
31                         success: function(response) {
32                             if (response.success) {
33                                 $('.target', $window).text(response.message);
34                                 setTimeout(function() { $window.jqmHide() }, 1000);
35                                 callback = ajaxable_callbacks[$trigger.attr('data-callback')];
36                                 callback && callback($trigger, response);
37                                 if (response.redirect)
38                                     window.location = response.redirect;
39                             }
40                             else {
41                                 $('.error', $window).remove();
42                                 $.each(response.errors, function(id, errors) {
43                                     $('#id_' + id, $window).before('<span class="error">' + errors[0] + '</span>');
44                                 });
45                                 $('input[type=submit]', $window).removeAttr('disabled');
46                                 return false;
47                             }
48                         }
49                     });
50                 }
51             });
52         });
53
54
55         var login_and_retry = function($form) {
56             var $window = $("#ajaxable-window").clone();
57             $window.attr("id", "context-login-window");
58             $('body').append($window);
59
60             $window.jqm({
61                 ajax: '/uzytkownik/zaloguj-utworz/?next=' + escape(window.location),
62                 ajaxText: '<p><img src="' + STATIC_URL + 'img/indicator.gif" alt="*"/> ' + gettext("Loading") + '</p>',
63                 target: $('.target', $window)[0],
64                 overlay: 60,
65                 onShow: function(hash) {
66                     var offset = $form.offset();
67                     hash.w.css({position: 'absolute', left: offset.left - hash.w.width() + $form.width(), top: offset.top});
68                     var width = $form.width();
69                     width = width > 50 ? width : 50;
70                     $('.header', hash.w).css({width: width});
71                     hash.w.show();
72                 },
73                 onLoad: function(hash) {
74                     $('form', hash.w).ajaxForm({
75                         dataType: 'json',
76                         target: $('.target', $window),
77                         success: function(response) {
78                             if (response.success) {
79                                 $('.target', $window).text(response.message);
80                                 setTimeout(function() { $window.jqmHide() }, 1000);
81                                 $form.submit();
82                                 location.reload();
83                             }
84                             else {
85                                 $('.error', $window).remove();
86                                 $.each(response.errors, function(id, errors) {
87                                     $('#id_' + id, $window).before('<span class="error">' + errors[0] + '</span>');
88                                 });
89                                 $('input[type=submit]', $window).removeAttr('disabled');
90                                 return false;
91                             }
92                         }
93                     });
94                 }
95             }).jqmShow();
96             
97         };
98
99
100         $('.ajax-form').each(function() {
101             var $form = $(this);
102             $form.ajaxForm({
103                 dataType: 'json',
104                 beforeSubmit: function() {
105                     $('input[type=submit]', $form)
106                         .attr('disabled', 'disabled')
107                         .after('<img src="/static/img/indicator.gif" style="margin-left: 0.5em"/>');
108                 },
109                 error: function(response) {
110                         if (response.status == 403)
111                             login_and_retry($form);
112                     },
113                 success: function(response) {
114                     if (response.success) {
115                         callback = ajax_form_callbacks[$form.attr('data-callback')];
116                         callback && callback($form, response);
117
118                     } else {
119                         $('span.error', $form).remove();
120                         $.each(response.errors, function(id, errors) {
121                             $('#id_' + id, $form).before('<span class="error">' + errors[0] + '</span>');
122                         });
123                         $('input[type=submit]', $form).removeAttr('disabled');
124                         $('img', $form).remove();
125                     }
126                 }
127             });
128         });
129
130
131         var update_star = function($elem, response) {
132             /* updates the star after successful ajax */
133             var $star = $elem.closest('.star');
134             if (response.like) {
135                 $star.addClass('like');
136                 $star.removeClass('unlike');
137             }
138             else {
139                 $star.addClass('unlike');
140                 $star.removeClass('like');
141             }
142         };
143
144         var ajax_form_callbacks = {
145             'social-like-book': update_star
146         };
147
148         var ajaxable_callbacks = {
149             'social-book-sets': location.reload
150         };
151
152
153
154     // check placeholder browser support
155     if (!Modernizr.input.placeholder)
156     {
157         // set placeholder values
158         $(this).find('[placeholder]').each(function()
159         {
160             $(this).val( $(this).attr('placeholder') ).addClass('placeholder');
161         });
162  
163         // focus and blur of placeholders
164         $('[placeholder]').focus(function()
165         {
166             if ($(this).val() == $(this).attr('placeholder'))
167             {
168                 $(this).val('');
169                 $(this).removeClass('placeholder');
170             }
171         }).blur(function()
172         {
173             if ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))
174             {
175                 $(this).val($(this).attr('placeholder'));
176                 $(this).addClass('placeholder');
177             }
178         });
179
180         // remove placeholders on submit
181         $('[placeholder]').closest('form').submit(function()
182         {
183             $(this).find('[placeholder]').each(function()
184             {
185                 if ($(this).val() == $(this).attr('placeholder'))
186                 {
187                     $(this).val('');
188                 }
189             })
190         });
191     }
192
193
194
195     });
196 })(jQuery)
197