3bbb38d55b2b51b4fe8f04ffe08b6030499ab185
[wolnelektury.git] / src / wolnelektury / static / 2021 / scripts / main.js
1 // JS Menu
2 (function () {
3   let button = $('.js-menu');
4   let menu = $('.l-navigation');
5   let menuLinks = menu.find('a');
6
7   button.on('click', function() {
8     if(!$(this).hasClass('is-active')) {
9       $(this).addClass('is-active');
10       menu.addClass('is-open');
11       $('body').addClass('is-open');
12       button.find('.bar').addClass('animate');
13       menuLinks.attr('tabindex', 0);
14     } else {
15       $(this).removeClass('is-active');
16       menu.removeClass('is-open');
17       $('body').removeClass('is-open');
18       button.find('.bar').removeClass('animate');
19       menuLinks.attr('tabindex', -1);
20     }
21   });
22
23   $(document).keyup(function(e) {
24     if (e.keyCode === 27) {
25       button.removeClass('is-active');
26       menu.removeClass('is-open');
27       $('body').removeClass('is-open');
28       button.find('.bar').removeClass('animate');
29       menuLinks.attr('tabindex', -1);
30     }
31   });
32 })();
33
34 // User menu.
35 (function() {
36     let button = $('.l-navigation__actions .user');
37     let menu = $('#user-menu');
38     let menuLinks = menu.find('a');
39
40     button.on('click', function() {
41         if (!menu.hasClass('is-open')) {
42             menu.addClass('is-open');
43             menuLinks.attr('tabindex', 0);
44         } else {
45             menu.removeClass('is-open');
46             menuLinks.attr('tabindex', -1)
47         }
48         return false;
49     });
50
51     $(document).keyup(function(e) {
52         if (e.keyCode === 27) {
53             menu.removeClass('is-open');
54             menuLinks.attr('tabindex', -1);
55         }
56     });
57
58     $(document).click(function() {
59       menu.removeClass('is-open');
60       menuLinks.attr('tabindex', -1);
61     });
62
63 })();
64
65 // Ebook/Audiobook Btns
66 (function() {
67   let button = $('.c-media__btn button:not(.l-button--media--full)');
68   let popupLayer = $('.c-media__popup');
69   let closeButton = $('.c-media__popup__close');
70   let playButton = $('.c-player__btn--md');
71   let chaptersButton = $('.c-player__chapters span');
72   let select = $('.c-select');
73   let selectItem = $('.c-select li');
74   let volumeButton = $('.icon-volume');
75
76   button.on('click', function () {
77     let target = $(this).attr('id');
78     $('[data-popup=' + target).addClass('is-open');
79     $('body').addClass('popup-open');
80   });
81
82   closeButton.on('click', function() {
83     $(this).closest('.c-media__popup').removeClass('is-open');
84     $('body').removeClass('popup-open');
85   });
86
87   popupLayer.on('click', function(e) {
88     let _this = $(this);
89     if($(e.target).is(popupLayer)) {
90       _this.removeClass('is-open');
91       $('body').removeClass('popup-open');
92     }
93   });
94
95   chaptersButton.on('click', function() {
96     $(this).parent().toggleClass('is-active');
97   });
98
99   select.on('click', function() {
100     $(this).toggleClass('is-active');
101   });
102
103   selectItem.on('click', function() {
104     selectItem.removeClass('is-active');
105     $(this).addClass('is-active');
106   });
107
108   $(document).keyup(function(e) {
109     if (e.keyCode === 27) {
110       $('.c-media__popup').removeClass('is-open');
111     }
112   });
113 })();
114
115 // Homepage books sliders
116 (function () {
117   let shelfSlider = $('.l-your-books__shelf .l-books');
118   let shelfNextSlide = $('.l-your-books__shelf .js-next-slide');
119   let shelfPrevSlide = $('.l-your-books__shelf .js-prev-slide');
120   let shelfCollapse = $('.l-your-books__shelf .js-collapse');
121
122   shelfSlider.slick({
123     slidesToScroll: 1,
124     slidesToShow: 4,
125     infinite: false,
126     dots: false,
127     arrows: false,
128     autoplay: false,
129     responsive: [
130       {
131         breakpoint: 768,
132         settings: {
133           centerMode: false,
134           slidesToShow: 1
135         }
136       }
137     ]
138   });
139
140   shelfNextSlide.on('click', function (event) {
141     event.preventDefault();
142     shelfSlider.slick('slickNext');
143   });
144
145   shelfPrevSlide.on('click', function (event) {
146     event.preventDefault();
147     shelfSlider.slick('slickPrev');
148   });
149
150   shelfCollapse.on('click', function (event) {
151     event.preventDefault();
152     shelfSlider.slick('slickPrev');
153   });
154
155
156     $('.js-collections').each(function() {
157         //return;
158         let collectionsSlider = $('.l-books', this);
159         if (collectionsSlider.children().length < 2) return;
160
161         // remove flexbox
162         collectionsSlider.css('display', 'block');
163         
164         let collectionsNextSlide = $('.js-next-slide', this);
165         let collectionsPrevSlide = $('.js-prev-slide', this);
166
167   collectionsSlider.slick({
168       //prevArrow, nextArrow,
169
170       slidesToScroll: 1,
171       slidesToShow: 1,
172       infinite: false,
173       dots: false,
174       arrows: false,
175       autoplay: false,
176
177       swipeToSlide: true,
178       centerMode: false,
179       mobileFirst: true,
180       responsive: [
181           {
182               breakpoint: 360 - .01,
183               settings: {
184                   slidesToShow: 2,
185               }
186           },
187           {
188               breakpoint: 520 - .01,
189               settings: {
190                   slidesToShow: 3
191               }
192           },
193           {
194               breakpoint: 680 - .01,
195               settings: {
196                   slidesToShow: 4
197               }
198           },
199           {
200               breakpoint: 840 - .01,
201               settings: {
202                   slidesToShow: 5
203               }
204           },
205           {
206               breakpoint: 1172 - .01,
207               settings: {
208                   slidesToShow: 5,
209                   variableWidth: true,
210               }
211           },
212       ]
213   });
214
215   collectionsNextSlide.on('click', function (event) {
216     event.preventDefault();
217     collectionsSlider.slick('slickNext');
218   });
219
220   collectionsPrevSlide.on('click', function (event) {
221     event.preventDefault();
222     collectionsSlider.slick('slickPrev');
223   });
224     });
225   let newBooksSlider = $('.js-new-books-slider .l-books');
226   let newBooksNextSlide = $('.js-new-books-slider .js-next-slide');
227   let newBooksPrevSlide = $('.js-new-books-slider .js-prev-slide');
228
229   newBooksSlider.slick({
230     slidesToScroll: 1,
231     slidesToShow: 5,
232     infinite: false,
233     dots: false,
234     arrows: false,
235     autoplay: false,
236     responsive: [
237       {
238         breakpoint: 768,
239         settings: {
240           centerMode: false,
241           slidesToShow: 2
242         }
243       }
244     ]
245   });
246
247   newBooksNextSlide.on('click', function (event) {
248     event.preventDefault();
249     newBooksSlider.slick('slickNext');
250   });
251
252   newBooksPrevSlide.on('click', function (event) {
253     event.preventDefault();
254     newBooksSlider.slick('slickPrev');
255   });
256 })();
257
258 // Quotes slider
259 (function () {
260   let slider = $('.l-author__quotes__slider');
261
262   slider.slick({
263     slidesToScroll: 1,
264     slidesToShow: 1,
265     infinite: true,
266     dots: true,
267     arrows: false,
268     autoplay: true,
269     autoplaySpeed: 3000
270   });
271
272
273   let sliderHomepage = $('.l-quotes');
274   sliderHomepage.slick({
275     slidesToShow: 1,
276     centerMode: false,
277     infinite: true,
278     dots: true,
279     arrows: false,
280     autoplay: true,
281     autoplaySpeed: 4000,
282   });
283
284 })();
285
286
287
288
289 // Carousel
290 (function () {
291   let slider = $('.p-homepage__info__box--carousel');
292
293   slider.slick({
294     slidesToScroll: 1,
295     slidesToShow: 1,
296     infinite: true,
297     dots: true,
298     arrows: false,
299     autoplay: true,
300     autoplaySpeed: 5000
301   });
302
303
304
305 })();
306
307
308
309 // Text overlay toggler
310 (function () {
311   let overlays = $('.l-article__overlay');
312   let button = $('.l-article__read-more');
313
314   overlays.each(function () {
315     let maxHeight = $(this).attr('data-max-height');
316     if($(this).outerHeight() > maxHeight) {
317       $(this).css({'maxHeight': maxHeight+'px'}).addClass('is-active');
318     } else {
319       $(this).next('.l-article__read-more').hide();
320     }
321   });
322
323   button.on('click', function() {
324     let dataLabel = $(this).attr('data-label');
325     let dataAction = $(this).attr('data-action');
326     $(this).parent().find('.l-article__overlay').toggleClass('is-clicked');
327     if($(this).text() === dataLabel) {
328       $(this).text(dataAction);
329     } else {
330       $(this).text(dataLabel);
331     }
332   });
333 })();
334
335 //Zmieniamy się popup
336 (function() {
337   let $change = $('.l-change-pop');
338   function change() {
339     if(localStorage.getItem('change') === null) {
340       $change.addClass('show');
341     } else {
342       $change.remove();
343       return false;
344     }
345
346     $change.on('click', '.l-change-pop__close', function () {
347       $change.slideUp();
348       localStorage.setItem('change', 'showed');
349     });
350   }
351
352   if($change.length) { change(); }
353
354
355     function quit_experiment() {
356         document.cookie = 'EXPERIMENT_layout=off; path=/; max-age=31536000';
357         window.location.reload(true);
358     }
359     $(".quit-experiment").click(quit_experiment);
360
361 })();
362
363 (function() {
364     $('.l-checkout__payments__box button').on('click', function() {
365         let container = $(this).closest('.l-checkout__payments');
366         $('input', container).val($(this).val());
367         $('.is-active', container).removeClass('is-active');
368         $(this).closest('.l-checkout__payments__box').addClass('is-active');
369         $('#kwota').val('');
370         return false;
371     });
372     
373 })();
374
375
376 //Copy function
377 (function() {
378   let $copy = $('.js-copy');
379
380   $copy.on('click', function() {
381     let $copyText = $(this).closest('.l-checkout__info__item').find('input');
382     $copyText.select();
383     document.execCommand('copy');
384   });
385 })();
386
387
388
389 // Likes
390 (function() {
391
392     ids = new Set(); 
393     $(".icon-like").each(
394         (i, e)=>{
395             ids.add($(e).attr('data-book'));
396         }
397     );
398     ids = [...ids].join(',');
399
400     state = {
401         liked: [],
402     };
403     
404     $(document).on('click', '.icon-like', function(e) {
405         e.preventDefault();
406         let liked = $(this).hasClass('icon-liked');
407         $btn = $(this);
408         if (liked) {
409             $.post({
410                 url: '/ludzie/lektura/' + $(this).attr('data-book-slug') + '/nie_lubie/',
411                 data: {'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()},
412                 success: function() {
413                     delete state.liked[$btn.attr('data-book')];
414                     updateLiked($btn);
415                 }
416             })
417         } else {
418             $.post({
419                 url: '/ludzie/lektura/' + $(this).attr('data-book-slug') + '/lubie/',
420                 data: {'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()},
421                 success: function() {
422                     state.liked[$btn.attr('data-book')] = [];
423                     updateLiked($btn);
424                 },
425                 error: function(e) {
426                     if (e.status == 403) {
427                         $('#login-link').click();
428                     }
429                 },
430             });
431         }
432     })
433
434     // TODO: DYNAMICALLY ADD
435    $(".add-set-tag input[name=name]").autocomplete({
436        source: '/ludzie/moje-tagi/',
437    }).on('autocompleteopen', function() {
438        $(this).closest('article').addClass('ac-hover');
439    }).on('autocompleteclose', function() {
440        $(this).closest('article').removeClass('ac-hover');
441    });
442     $(".add-set-tag").on("submit", function(e) {
443         e.preventDefault();
444         let $form = $(this);
445         $.post({
446             url: $form.attr("action"),
447             data: $form.serialize(),
448             success: (data) => {
449                 updateFromData(data);
450                 updateLikedAll();
451                 $('input[name=name]', $form).val('');
452             }
453         });
454     })
455
456     $(document).on("click", ".sets .close", function() {
457         let bookId = $(this).closest("[data-book]").attr('data-book');
458         $.post({
459             url: '/ludzie/usun-tag/',
460             data: {
461                 csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
462                 book: bookId,
463                 slug: $(this).parent().attr('data-set'),
464             },
465             success: (data) => {
466                 updateFromData(data);
467                 updateLikedAll();
468             }
469         });
470     })
471
472     
473     function refreshAll(ids) {
474         $.ajax('/ludzie/ulubione/?ids=' + ids, {
475             success: function(result) {
476                 updateFromData(result);
477                 updateLikedAll();
478             },
479         });
480     }
481     refreshAll(ids);
482     $.refreshLikes = refreshAll;
483
484     function updateFromData(data) {
485         for (pk in data) {
486             if (data[pk] === null) {
487                 delete state.liked[pk];
488             } else {
489                 state.liked[pk] = data[pk];
490             }
491         }
492     }
493     
494     function updateLikedAll() {
495         $(".icon-like").each(
496             (i, e) => {
497                 updateLiked(e);
498             }
499         )
500     }
501
502     function updateLiked(e) {
503         let bookId = $(e).attr('data-book');
504         let liked = bookId in state.liked;
505         $(e).toggleClass('icon-liked', liked);
506         let $bookContainer = $('.book-container-' + bookId);
507         $bookContainer.toggleClass('book-liked', liked);
508         let $sets = $(".sets", $bookContainer);
509         $sets.empty();
510         $.each(state.liked[bookId], (i,e) => {
511             let $set = $("<span>");
512             $set.attr("data-set", e.slug);
513             let $setA = $("<a>").appendTo($set);
514             $setA.attr("href", e.url);
515             $setA.text(e.name);
516             let $setX = $("<a class='close'></a>").appendTo($set);
517             $sets.append($set);
518         });
519     }
520     
521 })();
522
523
524
525 // Toggle a class on long press.
526 (function() {
527     const TIME = 250;
528     let timer;
529
530     $("[data-longpress]").on("touchstart", (e) => {
531         $e = $(e.currentTarget);
532         timer = setTimeout(() => {
533             $e.toggleClass($e.attr('data-longpress'));
534         }, TIME);
535     });
536
537     $("[data-longpress]").on("touchend", () => {
538         clearTimeout(timer);
539     });
540 })();
541
542
543
544 // Update search form filters.
545 (function() {
546     $('.j-form-auto').each(function() {
547         let $form = $(this);
548         $('input', $form).change(function() {$form.submit()});
549         $('select', $form).change(function() {$form.submit()});
550         $('textarea', $form).change(function() {$form.submit()});
551     });
552 })();