fix
[wolnelektury.git] / src / wolnelektury / static / js / base.js
1 (function($) {
2     $(function() {
3         $.fn.toggle_slide = function(p) {
4             var cont = $(this);
5             var short_el = p['short_el'] || $(':first-child', this);
6             var long_el = p['long_el'] || short_el.next();
7             var button = p['button'];
8             var short_text = p['short_text'];
9             var long_text = p['long_text'];
10
11             var toggle_fun = function(cont, short_el, long_el, button, short_text, long_text) {
12                 return function () {
13                     if (cont.hasClass('short')) {
14                         cont.animate({"height": long_el.attr("cont_h") + 'px'}, {duration: "fast"})
15                             .removeClass('short');
16                         short_el.hide();
17                         long_el.show();
18                         if (button && long_text) button.html(long_text);
19                     } else {
20                         cont.animate({"height": short_el.attr("cont_h") + 'px'}, {duration: "fast"}).addClass('short');
21                         long_el.hide();
22                         short_el.show();
23                         if (button && short_text) button.html(short_text);
24                     }
25                     return false;
26                 };
27             };
28             if (long_el.html().length <= short_el.html().length)
29                 return;
30
31             // ensure long element shown first
32             long_el.show();short_el.hide();
33             long_el.attr("cont_h", $(this).height()).hide();
34             short_el.show().attr("cont_h", $(this).height());
35             $(this).addClass('short');
36
37             if (button && short_text)
38                 button.html(short_text);
39             if (button)
40                 button.click(toggle_fun(cont, short_el, long_el, button, short_text, long_text));
41         };
42
43
44         // Fragments
45         $('.fragment-with-short').each(function() {
46             $(this).toggle_slide({
47                 short_el: $('.fragment-short-text', this),
48                 long_el: $('.fragment-long-text', this),
49                 button: $('.toggle', this)
50             })
51         });
52         $('#description').each(function() {
53             $(this).toggle_slide({
54                 short_el: $('#description-short', this),
55                 long_el: $('#description-long', this),
56                 button: $(this)
57             })
58         });
59
60         $('.more-expand').each(function () {
61             $(this).shorten({
62                 showChars: 150,
63                 moreText: "wiÄ™cej",
64                 lessText: "mniej"
65             });
66         });
67
68
69         $('.carousel').on('cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
70             $("iframe", outgoingSlideEl).attr("src", '');
71             $("iframe", incomingSlideEl).attr("src", $("iframe", incomingSlideEl).attr('data-src'));
72         });
73         $('.carousel section').first().each(function() {
74             $("iframe", this).attr("src", $("iframe", this).attr('data-src'));
75         });
76
77         $(".carousel").each(function() {
78             opts = {};
79             if ($('html').hasClass('media-eink')) {
80                 opts.fx = 'none'
81             }
82             $(this).cycle(opts);
83         });
84
85
86         (function() {
87             var $current = null;
88             var menu_loaded = false;
89             $('.hidden-box-wrapper').each(function() {
90                 var $hidden = $('.hidden-box', this);
91                 $('.hidden-box-trigger', this).click(function(event) {
92                     event.preventDefault();
93                     if ($current == $hidden) {
94                         $current = null;
95                         $hidden.hide('fast');
96                     } else {
97                         $current && $current.hide('fast');
98                         $hidden.show('fast');
99                         $current = $hidden;
100                         if ($(this).hasClass('load-menu') && !menu_loaded) {
101                             $.ajax({
102                                 url: '/katalog/' + LANGUAGE_CODE + '.json',
103                                 dataType: "json"
104                             }).done(function(data) {
105                                 $.each(data, function(index, value) {
106                                     var $menuitem = $('#menu-' + index);
107                                     $menuitem.html(value);
108                                     var $minisearch = $("<input class='mini-search' style='margin-bottom: 1em' />");
109                                     $minisearch.keyup(function() {
110                                         var s = $(this).val().toLowerCase();
111                                         if (s) {
112                                             $("li", $menuitem).each(function() {
113                                                 if ($("a", this).text().toLowerCase().indexOf(s) != -1)
114                                                     $(this).show();
115                                                 else
116                                                     $(this).hide();
117                                             });
118                                         }
119                                         else {
120                                             $("li", $menuitem).css("display", "");
121                                         }
122                                     });
123                                     $menuitem.prepend($minisearch);
124                                 });
125                                 menu_loaded = true;
126                             });
127                         }
128                     }
129                 });
130             });
131             /* this kinda breaks the whole page. */
132             $('body').click(function(e) {
133                 if ($current == null) return;
134                 var p = $(e.target);
135                 while (p.length) {
136                     if (p == $current)
137                         return;
138                     if (p.hasClass('hidden-box-trigger')
139                         || p.hasClass('simple-toggler')
140                         || p.hasClass('mini-search'))
141                         return;
142                     p = p.parent();
143                 }
144                 $current.hide('fast');
145                 $current = null;
146             });
147         })();
148
149
150         $('#show-menu').click(function(event) {
151             event.preventDefault();
152             //$('#menu').toggle('fast');
153             $('body').toggleClass('menu-on');
154         });
155
156
157         $('#book-list-nav').find('h2').click(function(event) {
158             event.preventDefault();
159             $('#book-list-nav-index').toggle();
160         });
161
162
163         $('#themes-list-toggle').click(function(event) {
164             event.preventDefault();
165             $('#themes-list').toggle('fast');
166         });
167
168
169         $('.book-list-index').click(function(){
170             $('.book-list-show-index').hide('fast');
171             var books_ul = $(this).parent().next().children().first();
172             if(books_ul.first().is(':hidden')){
173                 books_ul.toggle('fast');
174             }
175             return false;
176         });
177
178         $('.hoverclick').click(function() {$(this).closest('.hoverget').toggleClass('hover');});
179         $('.hoverclick').keydown(function(event){ 
180             var keyCode = (event.keyCode ? event.keyCode : event.which);   
181             if (keyCode == 13) {
182                 $(this).trigger('click');
183             }
184         });
185
186         $(function(){
187             $("#search").search();
188         });
189
190         $('body').on('click', '.simple-toggler' , function(ev) {
191             ev.preventDefault();
192             var scope = $(this).closest('.simple-toggler-scope');
193             scope.find('.simple-hidden-box').each(function() {
194                 var $this = $(this);
195                 if ($this.is(':hidden')) {
196                     $this.show();
197                 } else {
198                     $this.hide();
199                 }
200             });
201         });
202
203
204         $('.tabbed-filter').each(function() {
205             var tf = this;
206             $('.tab').click(function() {
207                 if ($(this).hasClass('active')) {
208                     $(this).removeClass('active');
209                     $('#' + $(this).attr('data-id')).hide();
210                 }
211                 else {
212                     var $active = $('.active', tf);
213                     $active.removeClass('active');
214                     $('#' + $active.attr('data-id')).hide();
215                     $(this).addClass('active');
216                     $('#' + $(this).attr('data-id')).show();
217                 }
218             });
219         });
220
221
222         $('.plain-list-paged').each(function() {
223             // should change on resize?
224             var $plc = $(this);
225             var $pl = $('.plain-list', this);
226
227             var $items = $('p', $pl);
228
229             if ($items.length > 40) {
230                 $items.hide();
231                 var prev = [0, 0];
232
233                 $('.pager', $plc).paging($items.length, {
234                     format: '[< ncnnn >]', // define how the navigation should look like and in which order onFormat() get's called
235                     perpage: 40,
236                     lapping: 0, // don't overlap pages for the moment
237                     page: 1, // start at page, can also be "null" or negative
238                     onSelect: function (page) {
239                         var data = this.slice;
240                         $items.slice(prev[0], prev[1]).hide();
241                         $items.slice(data[0], data[1]).show();
242                         prev = data;
243                     },
244                     onFormat: function (type) {
245                         switch (type) {
246                             case 'block': // n and c
247                                 return ' <li><a href="#"' + (this.value == this.page ? ' class="current"' : '') + '>' +
248                                     this.value + '</a></li>';
249                             case 'next': // >
250                                 return '<li><a href="#">&rsaquo;</a></li>';
251                             case 'prev': // <
252                                 return '<li><a href="#">&lsaquo;</a></li>';
253                             case 'first': // [
254                                 return '<li><a href="#">&laquo;</a></li>';
255                             case 'last': // ]
256                                 return '<li><a href="#">&raquo;</a></li>';
257                         }
258                     }
259                 });
260             }
261         });
262
263         /* global tlite */
264         tlite(function (el) {
265             return $(el).hasClass('tlite-tooltip');
266         });
267
268         /* more/less switch from https://codepen.io/JoshBlackwood/pen/pEwHe */
269         // Hide the extra content initially, using JS so that if JS is disabled, no problemo:
270         $('.read-more-content').addClass('hide');
271         $('.read-more-show, .read-more-hide').removeClass('hide');
272
273         // Set up the toggle effect:
274         $('.read-more-show').on('click', function(e) {
275           $(this).next('.read-more-content').removeClass('hide');
276           $(this).addClass('hide');
277           e.preventDefault();
278         });
279
280         // Changes contributed by @diego-rzg
281         $('.read-more-hide').on('click', function(e) {
282           var p = $(this).parent('.read-more-content');
283           p.addClass('hide');
284           p.prev('.read-more-show').removeClass('hide'); // Hide only the preceding "Read More"
285           e.preventDefault();
286         });
287
288
289         function update_info() {
290             var amount = parseInt($("#id_amount").val());
291             var monthly =  $("#id_monthly").val() == 'True';
292             if (monthly) slug = "monthly";
293             else if (amount >= parseInt($("#plan-single").attr('data-min-for-year'))) slug = 'single-year';
294             else slug = 'single';
295
296             var chunk = $('.club-form-info .chunk-' + slug);
297             if (chunk.css('display') == 'none') {
298                 $('.chunk-alt').css('height', $('.chunk-alt').height());
299                 $('.chunk-alt .chunk').css('position', 'absolute');
300
301                 $('.club-form-info .chunk').fadeOut();
302                 $('.club-form-info .chunk.chunk-' + slug).fadeIn(function() {
303                     $('.chunk-alt .chunk').css('position', 'static');
304                     $('.chunk-alt').css('height', 'auto');
305                 });
306                 $('.chunk-alt').animate({height: chunk.height()}, 100);
307             }
308         }
309         
310         $("#id_amount").val($("#plan-monthly").attr('data-amount'));
311         
312         $(".button.kwota").click(function() {
313             var plan = $(this).closest('.plan');
314             $('.kwota', plan).removeClass('active')
315             $('.inna', plan).removeClass('active')
316             $(this).addClass('active');
317
318             var amount = $(this).text();
319             plan.attr("data-amount", amount);
320             $("#id_amount").val(amount);
321
322             update_info();
323             return false;
324         });
325
326         $(".plan-toggle").click(function() {
327             $(".plan-toggle").removeClass('active');
328             $(this).addClass('active')
329             $(".plan").hide();
330             var plan = $("#" + $(this).attr('data-plan'));
331             plan.show();
332             $("#id_amount").val(plan.attr('data-amount'));
333             $("#id_monthly").val(plan.attr('data-monthly'));
334
335             update_info();
336             return false;
337         });
338
339         $(".inna .button").click(function() {
340             var plan = $(this).closest('.plan');
341             $('.kwota', plan).removeClass('active');
342             $(this).parent().addClass('active');
343             $('input', plan).focus();
344
345             var amount = $('input', $(this).parent()).val();
346             plan.attr("data-amount", amount);
347             $("#id_amount").val(amount);
348
349             update_info();
350             return false;
351         });
352         
353         $(".inna input").on('input', function() {
354             var plan = $(this).closest('.plan');
355             $('.kwota', plan).removeClass('active');
356             var amount = $(this).val();
357             plan.attr("data-amount", amount);
358             $("#id_amount").val(amount);
359
360             update_info();
361             return false;
362         });
363
364         $("#id_method").val('payu-re');
365         $(".methods .button").click(function() {
366             $("#id_method").val($(this).attr('data-method'));
367             $(".methods .button").removeClass('active');
368             $(this).addClass("active");
369         });
370
371
372         $("#skiplink-search").click(function() {
373             console.log('skiplink search');
374             $("#search").focus();
375             return false;
376         });
377         
378         // experiments
379         $(".experiment input").on('change', function() {
380             let name = $(this).attr('name');
381             let val = $(this).val();
382             document.cookie = 'EXPERIMENT_' + name + '=' + val + '; path=/; max-age=31536000';
383             window.location.reload(true);
384         });
385     });
386 })(jQuery);
387