X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/d8a368e376f9f50ff0e3714ef716df548e86bd7f..67c985af477f2a622a5c3ce81afd7cb424326871:/src/wolnelektury/static/2021/scripts/main.js?ds=sidebyside diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js index 97ac9a363..696a5fb00 100644 --- a/src/wolnelektury/static/2021/scripts/main.js +++ b/src/wolnelektury/static/2021/scripts/main.js @@ -152,26 +152,64 @@ shelfSlider.slick('slickPrev'); }); - let collectionsSlider = $('.js-collections .l-books'); - let collectionsNextSlide = $('.js-collections .js-next-slide'); - let collectionsPrevSlide = $('.js-collections .js-prev-slide'); + + $('.js-collections').each(function() { + //return; + let collectionsSlider = $('.l-books', this); + if (collectionsSlider.children().length < 2) return; + + // remove flexbox + collectionsSlider.css('display', 'block'); + + let collectionsNextSlide = $('.js-next-slide', this); + let collectionsPrevSlide = $('.js-prev-slide', this); collectionsSlider.slick({ - slidesToScroll: 1, - slidesToShow: 5, - infinite: false, - dots: false, - arrows: false, - autoplay: false, - responsive: [ - { - breakpoint: 768, - settings: { - centerMode: false, - slidesToShow: 2 - } - } - ] + //prevArrow, nextArrow, + + slidesToScroll: 1, + slidesToShow: 1, + infinite: false, + dots: false, + arrows: false, + autoplay: false, + + swipeToSlide: true, + centerMode: false, + mobileFirst: true, + responsive: [ + { + breakpoint: 360 - .01, + settings: { + slidesToShow: 2, + } + }, + { + breakpoint: 520 - .01, + settings: { + slidesToShow: 3 + } + }, + { + breakpoint: 680 - .01, + settings: { + slidesToShow: 4 + } + }, + { + breakpoint: 840 - .01, + settings: { + slidesToShow: 5 + } + }, + { + breakpoint: 1172 - .01, + settings: { + slidesToShow: 5, + variableWidth: true, + } + }, + ] }); collectionsNextSlide.on('click', function (event) { @@ -183,7 +221,7 @@ event.preventDefault(); collectionsSlider.slick('slickPrev'); }); - + }); let newBooksSlider = $('.js-new-books-slider .l-books'); let newBooksNextSlide = $('.js-new-books-slider .js-next-slide'); let newBooksPrevSlide = $('.js-new-books-slider .js-prev-slide'); @@ -228,33 +266,46 @@ dots: true, arrows: false, autoplay: true, - autoplaySpeed: 2500 + autoplaySpeed: 3000 }); let sliderHomepage = $('.l-quotes'); sliderHomepage.slick({ slidesToShow: 1, - centerMode: true, - centerPadding: '250px', + centerMode: false, infinite: true, dots: true, arrows: false, autoplay: true, - autoplaySpeed: 2500, - responsive: [ - { - breakpoint: 768, - settings: { - centerMode: false, - slidesToShow: 1 - } - } - ] + autoplaySpeed: 4000, }); })(); + + + +// Carousel +(function () { + let slider = $('.p-homepage__info__box--carousel'); + + slider.slick({ + slidesToScroll: 1, + slidesToShow: 1, + infinite: true, + dots: true, + arrows: false, + autoplay: true, + autoplaySpeed: 5000 + }); + + + +})(); + + + // Text overlay toggler (function () { let overlays = $('.l-article__overlay'); @@ -281,34 +332,6 @@ }); })(); -//Zmieniamy się popup -(function() { - let $change = $('.l-change-pop'); - function change() { - if(localStorage.getItem('change') === null) { - $change.addClass('show'); - } else { - $change.remove(); - return false; - } - - $change.on('click', '.l-change-pop__close', function () { - $change.slideUp(); - localStorage.setItem('change', 'showed'); - }); - } - - if($change.length) { change(); } - - - function quit_experiment() { - document.cookie = 'EXPERIMENT_layout=off; path=/; max-age=31536000'; - window.location.reload(true); - } - $(".quit-experiment").click(quit_experiment); - -})(); - (function() { $('.l-checkout__payments__box button').on('click', function() { let container = $(this).closest('.l-checkout__payments'); @@ -332,3 +355,181 @@ document.execCommand('copy'); }); })(); + + + +// Likes +(function() { + + ids = new Set(); + $(".icon-like").each( + (i, e)=>{ + ids.add($(e).attr('data-book')); + } + ); + ids = [...ids].join(','); + + state = { + liked: [], + }; + + $(document).on('click', '.icon-like', function(e) { + e.preventDefault(); + let liked = $(this).hasClass('icon-liked'); + $btn = $(this); + if (liked) { + $.post({ + url: '/ludzie/lektura/' + $(this).attr('data-book-slug') + '/nie_lubie/', + data: {'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()}, + success: function() { + delete state.liked[$btn.attr('data-book')]; + updateLiked($btn); + } + }) + } else { + $.post({ + url: '/ludzie/lektura/' + $(this).attr('data-book-slug') + '/lubie/', + data: {'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()}, + success: function() { + state.liked[$btn.attr('data-book')] = []; + updateLiked($btn); + }, + error: function(e) { + if (e.status == 403) { + $('#login-link').click(); + } + }, + }); + } + }) + + // TODO: DYNAMICALLY ADD + $(".add-set-tag input[name=name]").autocomplete({ + source: '/ludzie/moje-tagi/', + }).on('autocompleteopen', function() { + $(this).closest('article').addClass('ac-hover'); + }).on('autocompleteclose', function() { + $(this).closest('article').removeClass('ac-hover'); + }); + $(".add-set-tag").on("submit", function(e) { + e.preventDefault(); + let $form = $(this); + $.post({ + url: $form.attr("action"), + data: $form.serialize(), + success: (data) => { + updateFromData(data); + updateLikedAll(); + $('input[name=name]', $form).val(''); + } + }); + }) + + $(document).on("click", ".sets .close", function() { + let bookId = $(this).closest("[data-book]").attr('data-book'); + $.post({ + url: '/ludzie/usun-tag/', + data: { + csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(), + book: bookId, + slug: $(this).parent().attr('data-set'), + }, + success: (data) => { + updateFromData(data); + updateLikedAll(); + } + }); + }) + + + function refreshAll(ids) { + $.ajax('/ludzie/ulubione/?ids=' + ids, { + success: function(result) { + updateFromData(result); + updateLikedAll(); + }, + }); + } + refreshAll(ids); + $.refreshLikes = refreshAll; + + function updateFromData(data) { + for (pk in data) { + if (data[pk] === null) { + delete state.liked[pk]; + } else { + state.liked[pk] = data[pk]; + } + } + } + + function updateLikedAll() { + $(".icon-like").each( + (i, e) => { + updateLiked(e); + } + ) + } + + function updateLiked(e) { + let bookId = $(e).attr('data-book'); + let liked = bookId in state.liked; + $(e).toggleClass('icon-liked', liked); + let $bookContainer = $('.book-container-' + bookId); + $bookContainer.toggleClass('book-liked', liked); + let $sets = $(".sets", $bookContainer); + $sets.empty(); + $.each(state.liked[bookId], (i,e) => { + let $set = $(""); + $set.attr("data-set", e.slug); + let $setA = $("").appendTo($set); + $setA.attr("href", e.url); + $setA.text(e.name); + let $setX = $("").appendTo($set); + $sets.append($set); + }); + } + +})(); + + + +// Toggle a class on long press. +(function() { + const TIME = 250; + let timer; + + $("[data-longpress]").on("touchstart", (e) => { + $e = $(e.currentTarget); + timer = setTimeout(() => { + $e.toggleClass($e.attr('data-longpress')); + }, TIME); + }); + + $("[data-longpress]").on("touchend", () => { + clearTimeout(timer); + }); +})(); + + + +// Update search form filters. +(function() { + $('.j-form-auto').each(function() { + let $form = $(this); + $('input', $form).change(function() {$form.submit()}); + $('select', $form).change(function() {$form.submit()}); + $('textarea', $form).change(function() {$form.submit()}); + }); + + + // experiments + $(".experiment input").on('change', function() { + let name = $(this).attr('name'); + let val = $(this).val(); + document.cookie = 'EXPERIMENT_' + name + '=' + val + '; path=/; max-age=31536000'; + window.location.reload(true); + }); + + +})();