X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/e2a460b0a960df9482701ab10ec135a5cc3c69ac..eaba19e725b49fdf4efc858604a7b9d70d27f59f:/src/wolnelektury/static/2021/scripts/main.js?ds=inline diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js index 8120b43fa..3bbb38d55 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,24 +24,85 @@ 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'); + let button = $('.c-media__btn button:not(.l-button--media--full)'); + let popupLayer = $('.c-media__popup'); let closeButton = $('.c-media__popup__close'); + let playButton = $('.c-player__btn--md'); + let chaptersButton = $('.c-player__chapters span'); + let select = $('.c-select'); + let selectItem = $('.c-select li'); + let volumeButton = $('.icon-volume'); button.on('click', function () { let target = $(this).attr('id'); $('[data-popup=' + target).addClass('is-open'); + $('body').addClass('popup-open'); }); closeButton.on('click', function() { $(this).closest('.c-media__popup').removeClass('is-open'); + $('body').removeClass('popup-open'); + }); + + popupLayer.on('click', function(e) { + let _this = $(this); + if($(e.target).is(popupLayer)) { + _this.removeClass('is-open'); + $('body').removeClass('popup-open'); + } + }); + + chaptersButton.on('click', function() { + $(this).parent().toggleClass('is-active'); + }); + + select.on('click', function() { + $(this).toggleClass('is-active'); + }); + + selectItem.on('click', function() { + selectItem.removeClass('is-active'); + $(this).addClass('is-active'); }); $(document).keyup(function(e) { @@ -49,6 +112,200 @@ }); })(); +// 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'); + + shelfSlider.slick({ + slidesToScroll: 1, + slidesToShow: 4, + infinite: false, + dots: false, + arrows: false, + autoplay: false, + responsive: [ + { + breakpoint: 768, + settings: { + centerMode: false, + slidesToShow: 1 + } + } + ] + }); + + shelfNextSlide.on('click', function (event) { + event.preventDefault(); + shelfSlider.slick('slickNext'); + }); + + shelfPrevSlide.on('click', function (event) { + event.preventDefault(); + shelfSlider.slick('slickPrev'); + }); + + shelfCollapse.on('click', function (event) { + event.preventDefault(); + shelfSlider.slick('slickPrev'); + }); + + + $('.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({ + //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) { + 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 () { + let slider = $('.l-author__quotes__slider'); + + slider.slick({ + slidesToScroll: 1, + slidesToShow: 1, + infinite: true, + dots: true, + arrows: false, + autoplay: true, + autoplaySpeed: 3000 + }); + + + let sliderHomepage = $('.l-quotes'); + sliderHomepage.slick({ + slidesToShow: 1, + centerMode: false, + infinite: true, + dots: true, + arrows: false, + autoplay: true, + 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'); @@ -73,4 +330,223 @@ $(this).text(dataLabel); } }); -})(); \ No newline at end of file +})(); + +//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'); + $('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'); + + $copy.on('click', function() { + let $copyText = $(this).closest('.l-checkout__info__item').find('input'); + $copyText.select(); + 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()}); + }); +})();