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         let collectionsSlider = $('.l-books', this);
 158         if (collectionsSlider.children().length < 2) return;
 159         let collectionsNextSlide = $('.js-next-slide', this);
 160         let collectionsPrevSlide = $('.js-prev-slide', this);
 161
 162   collectionsSlider.slick({
 163     slidesToScroll: 1,
 164     slidesToShow: 5,
 165     infinite: false,
 166     dots: false,
 167     arrows: false,
 168     autoplay: false,
 169     responsive: [
 170       {
 171         breakpoint: 768,
 172         settings: {
 173           centerMode: false,
 174           slidesToShow: 2
 175         }
 176       }
 177     ]
 178   });
 179
 180   collectionsNextSlide.on('click', function (event) {
 181     event.preventDefault();
 182     collectionsSlider.slick('slickNext');
 183   });
 184
 185   collectionsPrevSlide.on('click', function (event) {
 186     event.preventDefault();
 187     collectionsSlider.slick('slickPrev');
 188   });
 189     });
 190   let newBooksSlider = $('.js-new-books-slider .l-books');
 191   let newBooksNextSlide = $('.js-new-books-slider .js-next-slide');
 192   let newBooksPrevSlide = $('.js-new-books-slider .js-prev-slide');
 193
 194   newBooksSlider.slick({
 195     slidesToScroll: 1,
 196     slidesToShow: 5,
 197     infinite: false,
 198     dots: false,
 199     arrows: false,
 200     autoplay: false,
 201     responsive: [
 202       {
 203         breakpoint: 768,
 204         settings: {
 205           centerMode: false,
 206           slidesToShow: 2
 207         }
 208       }
 209     ]
 210   });
 211
 212   newBooksNextSlide.on('click', function (event) {
 213     event.preventDefault();
 214     newBooksSlider.slick('slickNext');
 215   });
 216
 217   newBooksPrevSlide.on('click', function (event) {
 218     event.preventDefault();
 219     newBooksSlider.slick('slickPrev');
 220   });
 221 })();
 222
 223 // Quotes slider
 224 (function () {
 225   let slider = $('.l-author__quotes__slider');
 226
 227   slider.slick({
 228     slidesToScroll: 1,
 229     slidesToShow: 1,
 230     infinite: true,
 231     dots: true,
 232     arrows: false,
 233     autoplay: true,
 234     autoplaySpeed: 2500
 235   });
 236
 237
 238   let sliderHomepage = $('.l-quotes');
 239   sliderHomepage.slick({
 240     slidesToShow: 1,
 241     centerMode: true,
 242     centerPadding: '250px',
 243     infinite: true,
 244     dots: true,
 245     arrows: false,
 246     autoplay: true,
 247     autoplaySpeed: 2500,
 248     responsive: [
 249       {
 250         breakpoint: 768,
 251         settings: {
 252           centerMode: false,
 253           slidesToShow: 1
 254         }
 255       }
 256     ]
 257   });
 258
 259 })();
 260
 261 // Text overlay toggler
 262 (function () {
 263   let overlays = $('.l-article__overlay');
 264   let button = $('.l-article__read-more');
 265
 266   overlays.each(function () {
 267     let maxHeight = $(this).attr('data-max-height');
 268     if($(this).outerHeight() > maxHeight) {
 269       $(this).css({'maxHeight': maxHeight+'px'}).addClass('is-active');
 270     } else {
 271       $(this).next('.l-article__read-more').hide();
 272     }
 273   });
 274
 275   button.on('click', function() {
 276     let dataLabel = $(this).attr('data-label');
 277     let dataAction = $(this).attr('data-action');
 278     $(this).parent().find('.l-article__overlay').toggleClass('is-clicked');
 279     if($(this).text() === dataLabel) {
 280       $(this).text(dataAction);
 281     } else {
 282       $(this).text(dataLabel);
 283     }
 284   });
 285 })();
 286
 287 //Zmieniamy się popup
 288 (function() {
 289   let $change = $('.l-change-pop');
 290   function change() {
 291     if(localStorage.getItem('change') === null) {
 292       $change.addClass('show');
 293     } else {
 294       $change.remove();
 295       return false;
 296     }
 297
 298     $change.on('click', '.l-change-pop__close', function () {
 299       $change.slideUp();
 300       localStorage.setItem('change', 'showed');
 301     });
 302   }
 303
 304   if($change.length) { change(); }
 305
 306
 307     function quit_experiment() {
 308         document.cookie = 'EXPERIMENT_layout=off; path=/; max-age=31536000';
 309         window.location.reload(true);
 310     }
 311     $(".quit-experiment").click(quit_experiment);
 312
 313 })();
 314
 315 (function() {
 316     $('.l-checkout__payments__box button').on('click', function() {
 317         let container = $(this).closest('.l-checkout__payments');
 318         $('input', container).val($(this).val());
 319         $('.is-active', container).removeClass('is-active');
 320         $(this).closest('.l-checkout__payments__box').addClass('is-active');
 321         $('#kwota').val('');
 322         return false;
 323     });
 324
 325 })();
 326
 327
 328 //Copy function
 329 (function() {
 330   let $copy = $('.js-copy');
 331
 332   $copy.on('click', function() {
 333     let $copyText = $(this).closest('.l-checkout__info__item').find('input');
 334     $copyText.select();
 335     document.execCommand('copy');
 336   });
 337 })();
 338
 339
 340
 341 // Likes
 342 (function() {
 343
 344     ids = new Set();
 345     $(".icon-like").each(
 346         (i, e)=>{
 347             ids.add($(e).attr('data-book'));
 348         }
 349     );
 350     ids = [...ids].join(',');
 351
 352     state = {
 353         liked: [],
 354     };
 355
 356     $(".icon-like").on('click', function(e) {
 357         e.preventDefault();
 358         let liked = $(this).hasClass('icon-liked');
 359         $btn = $(this);
 360         if (liked) {
 361             $.post({
 362                 url: '/ludzie/lektura/' + $(this).attr('data-book-slug') + '/nie_lubie/',
 363                 data: {'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()},
 364                 success: function() {
 365                     delete state.liked[$btn.attr('data-book')];
 366                     updateLiked($btn);
 367                 }
 368             })
 369         } else {
 370             $.post({
 371                 url: '/ludzie/lektura/' + $(this).attr('data-book-slug') + '/lubie/',
 372                 data: {'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()},
 373                 success: function() {
 374                     state.liked[$btn.attr('data-book')] = [];
 375                     updateLiked($btn);
 376                 },
 377                 error: function(e) {
 378                     if (e.status == 403) {
 379                         $('#login-link').click();
 380                     }
 381                 },
 382             });
 383         }
 384     })
 385
 386    $(".add-set-tag input[name=name]").autocomplete({
 387        source: '/ludzie/moje-tagi/',
 388    }).on('autocompleteopen', function() {
 389        $(this).closest('article').addClass('ac-hover');
 390    }).on('autocompleteclose', function() {
 391        $(this).closest('article').removeClass('ac-hover');
 392    });
 393     $(".add-set-tag").on("submit", function(e) {
 394         e.preventDefault();
 395         let $form = $(this);
 396         $.post({
 397             url: $form.attr("action"),
 398             data: $form.serialize(),
 399             success: (data) => {
 400                 updateFromData(data);
 401                 updateLikedAll();
 402                 $('input[name=name]', $form).val('');
 403             }
 404         });
 405     })
 406
 407     $(document).on("click", ".sets .close", function() {
 408         let bookId = $(this).closest("[data-book]").attr('data-book');
 409         $.post({
 410             url: '/ludzie/usun-tag/',
 411             data: {
 412                 csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
 413                 book: bookId,
 414                 slug: $(this).parent().attr('data-set'),
 415             },
 416             success: (data) => {
 417                 updateFromData(data);
 418                 updateLikedAll();
 419             }
 420         });
 421     })
 422
 423
 424     function refreshAll(ids) {
 425         $.ajax('/ludzie/ulubione/?ids=' + ids, {
 426             success: function(result) {
 427                 updateFromData(result);
 428                 updateLikedAll();
 429             },
 430         });
 431     }
 432     refreshAll(ids);
 433
 434     function updateFromData(data) {
 435         for (pk in data) {
 436             if (data[pk] === null) {
 437                 delete state.liked[pk];
 438             } else {
 439                 state.liked[pk] = data[pk];
 440             }
 441         }
 442     }
 443
 444     function updateLikedAll() {
 445         $(".icon-like").each(
 446             (i, e) => {
 447                 updateLiked(e);
 448             }
 449         )
 450     }
 451
 452     function updateLiked(e) {
 453         let bookId = $(e).attr('data-book');
 454         let liked = bookId in state.liked;
 455         $(e).toggleClass('icon-liked', liked);
 456         let $bookContainer = $('.book-container-' + bookId);
 457         $bookContainer.toggleClass('book-liked', liked);
 458         let $sets = $(".sets", $bookContainer);
 459         $sets.empty();
 460         $.each(state.liked[bookId], (i,e) => {
 461             let $set = $("<span>");
 462             $set.attr("data-set", e.slug);
 463             let $setA = $("<a>").appendTo($set);
 464             $setA.attr("href", e.url);
 465             $setA.text(e.name);
 466             let $setX = $("<a class='close'></a>").appendTo($set);
 467             $sets.append($set);
 468         });
 469     }
 470
 471 })();
 472
 473
 474
 475 // Toggle a class on long press.
 476 (function() {
 477     const TIME = 250;
 478     let timer;
 479
 480     $("[data-longpress]").on("touchstart", (e) => {
 481         $e = $(e.currentTarget);
 482         timer = setTimeout(() => {
 483             $e.toggleClass($e.attr('data-longpress'));
 484         }, TIME);
 485     });
 486
 487     $("[data-longpress]").on("touchend", () => {
 488         clearTimeout(timer);
 489     });
 490 })();