X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/1249091e84840ca27aa6047db36c8e899328f15c..a7a0a535382be1fd706c3faca3a81201978ba587:/src/wolnelektury/static/2021/scripts/main.js diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js index d1138658b..a37d25691 100644 --- a/src/wolnelektury/static/2021/scripts/main.js +++ b/src/wolnelektury/static/2021/scripts/main.js @@ -1,18 +1,20 @@ // JS Menu (function () { let button = $('.js-menu'); - let menu = $('.l-navigation__menu'); + let menu = $('.l-navigation'); let menuLinks = menu.find('a'); button.on('click', function() { if(!$(this).hasClass('is-active')) { $(this).addClass('is-active'); menu.addClass('is-open'); + $('body').addClass('is-open'); button.find('.bar').addClass('animate'); menuLinks.attr('tabindex', 0); } else { $(this).removeClass('is-active'); menu.removeClass('is-open'); + $('body').removeClass('is-open'); button.find('.bar').removeClass('animate'); menuLinks.attr('tabindex', -1); } @@ -22,12 +24,44 @@ if (e.keyCode === 27) { button.removeClass('is-active'); menu.removeClass('is-open'); + $('body').removeClass('is-open'); button.find('.bar').removeClass('animate'); menuLinks.attr('tabindex', -1); } }); })(); +// User menu. +(function() { + let button = $('.l-navigation__actions .user'); + let menu = $('#user-menu'); + let menuLinks = menu.find('a'); + + button.on('click', function() { + if (!menu.hasClass('is-open')) { + menu.addClass('is-open'); + menuLinks.attr('tabindex', 0); + } else { + menu.removeClass('is-open'); + menuLinks.attr('tabindex', -1) + } + return false; + }); + + $(document).keyup(function(e) { + if (e.keyCode === 27) { + menu.removeClass('is-open'); + menuLinks.attr('tabindex', -1); + } + }); + + $(document).click(function() { + menu.removeClass('is-open'); + menuLinks.attr('tabindex', -1); + }); + +})(); + // Ebook/Audiobook Btns (function() { let button = $('.c-media__btn button:not(.l-button--media--full)'); @@ -39,14 +73,6 @@ let selectItem = $('.c-select li'); let volumeButton = $('.icon-volume'); - /*playButton.on('click', function() { - if($(this).find('.icon').hasClass('icon-play')) { - $(this).find('.icon-play').removeClass('icon-play').addClass('icon-pause'); - } else if($(this).find('.icon').hasClass('icon-pause')) { - $(this).find('.icon-pause').removeClass('icon-pause').addClass('icon-play'); - } - });*/ - button.on('click', function () { let target = $(this).attr('id'); $('[data-popup=' + target).addClass('is-open'); @@ -79,18 +105,6 @@ $(this).addClass('is-active'); }); - volumeButton.on('click', function() { - if($(this).hasClass('icon-volume')) { - $(this).removeClass('icon-volume').addClass('icon-mute'); - $(this).next().val(0); - $(this).next().css('background-size', '0% 100%'); - } else if($(this).hasClass('icon-mute')) { - $(this).removeClass('icon-mute').addClass('icon-volume'); - $(this).next().val(50); - $(this).next().css('background-size', '50% 100%'); - } - }); - $(document).keyup(function(e) { if (e.keyCode === 27) { $('.c-media__popup').removeClass('is-open'); @@ -98,24 +112,113 @@ }); })(); -// Range -const rangeInputs = document.querySelectorAll('input[type="range"]') +// Homepage books sliders +(function () { + let shelfSlider = $('.l-your-books__shelf .l-books'); + let shelfNextSlide = $('.l-your-books__shelf .js-next-slide'); + let shelfPrevSlide = $('.l-your-books__shelf .js-prev-slide'); + let shelfCollapse = $('.l-your-books__shelf .js-collapse'); -function handleInputChange(e) { - let target = e.target - if (e.target.type !== 'range') { - target = document.getElementById('range') - } - const min = target.min - const max = target.max - const val = target.value + shelfSlider.slick({ + slidesToScroll: 1, + slidesToShow: 4, + infinite: false, + dots: false, + arrows: false, + autoplay: false, + responsive: [ + { + breakpoint: 768, + settings: { + centerMode: false, + slidesToShow: 1 + } + } + ] + }); - target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%' -} + shelfNextSlide.on('click', function (event) { + event.preventDefault(); + shelfSlider.slick('slickNext'); + }); -rangeInputs.forEach(input => { - input.addEventListener('input', handleInputChange) -}); + shelfPrevSlide.on('click', function (event) { + event.preventDefault(); + shelfSlider.slick('slickPrev'); + }); + + shelfCollapse.on('click', function (event) { + event.preventDefault(); + shelfSlider.slick('slickPrev'); + }); + + + $('.js-collections').each(function() { + let collectionsSlider = $('.l-books', this); + if (collectionsSlider.children().length < 2) return; + 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 + } + } + ] + }); + + collectionsNextSlide.on('click', function (event) { + event.preventDefault(); + collectionsSlider.slick('slickNext'); + }); + + collectionsPrevSlide.on('click', function (event) { + 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'); + + newBooksSlider.slick({ + slidesToScroll: 1, + slidesToShow: 5, + infinite: false, + dots: false, + arrows: false, + autoplay: false, + responsive: [ + { + breakpoint: 768, + settings: { + centerMode: false, + slidesToShow: 2 + } + } + ] + }); + + newBooksNextSlide.on('click', function (event) { + event.preventDefault(); + newBooksSlider.slick('slickNext'); + }); + + newBooksPrevSlide.on('click', function (event) { + event.preventDefault(); + newBooksSlider.slick('slickPrev'); + }); +})(); // Quotes slider (function () { @@ -130,6 +233,29 @@ rangeInputs.forEach(input => { autoplay: true, autoplaySpeed: 2500 }); + + + let sliderHomepage = $('.l-quotes'); + sliderHomepage.slick({ + slidesToShow: 1, + centerMode: true, + centerPadding: '250px', + infinite: true, + dots: true, + arrows: false, + autoplay: true, + autoplaySpeed: 2500, + responsive: [ + { + breakpoint: 768, + settings: { + centerMode: false, + slidesToShow: 1 + } + } + ] + }); + })(); // Text overlay toggler @@ -176,22 +302,29 @@ rangeInputs.forEach(input => { } if($change.length) { change(); } -})(); -//Switch -(function() { - let $switchOnce = $('#switch-once'); - let $switchMonthly = $('#switch-monthly'); - $switchMonthly.on('click', function() { - $('.l-checkout__payments__box').removeClass('once'); - }); + function quit_experiment() { + document.cookie = 'EXPERIMENT_layout=off; path=/; max-age=31536000'; + window.location.reload(true); + } + $(".quit-experiment").click(quit_experiment); - $switchOnce.on('click', function() { - $('.l-checkout__payments__box').addClass('once'); - }); })(); +(function() { + $('.l-checkout__payments__box button').on('click', function() { + let container = $(this).closest('.l-checkout__payments'); + $('input', container).val($(this).val()); + $('.is-active', container).removeClass('is-active'); + $(this).closest('.l-checkout__payments__box').addClass('is-active'); + $('#kwota').val(''); + return false; + }); + +})(); + + //Copy function (function() { let $copy = $('.js-copy'); @@ -202,3 +335,156 @@ rangeInputs.forEach(input => { document.execCommand('copy'); }); })(); + + + +// Likes +(function() { + + ids = new Set(); + $(".icon-like").each( + (i, e)=>{ + ids.add($(e).attr('data-book')); + } + ); + ids = [...ids].join(','); + + state = { + liked: [], + }; + + $(".icon-like").on('click', 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(); + } + }, + }); + } + }) + + $(".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); + + 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); + }); +})();