src/wolnelektury/static/js/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().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 (function() {
 336     $('.l-checkout__payments__box button').on('click', function() {
 337         let container = $(this).closest('.l-checkout__payments');
 338         $('input', container).val($(this).val());
 339         $('.is-active', container).removeClass('is-active');
 340         $(this).closest('.l-checkout__payments__box').addClass('is-active');
 341         $('#id_custom_amount').val('');
 342     });
 343
 344     $('#id_custom_amount').on('input', function() {
 345         if ($(this).val() > 0) {
 346             $('.l-checkout__payments__box.is-active').removeClass('is-active');
 347         } else {
 348             $('.l-checkout__payments__box.initial-active').addClass('is-active');
 349         }
 350     });
 351
 352     $('.donation-mod-monthly').on('click', function() {
 353         $.ajax({
 354             method: 'POST',
 355             data: {
 356                 csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
 357                 monthly: $(this).data('monthly'),
 358             },
 359             url: $(this).data('url'),
 360             success: function(data) {
 361                 if ($(".q-reload-is-monthly").length) {
 362                     window.location.reload()
 363                 } else {
 364                     $(".q-is-monthly").toggleClass('is-monthly', data.monthly);
 365                 }
 366             }
 367         });
 368         return false;
 369     });
 370
 371 })();
 372
 373
 374 //Copy function
 375 (function() {
 376   let $copy = $('.js-copy');
 377
 378   $copy.on('click', function() {
 379     let $copyText = $(this).closest('.l-checkout__info__item').find('input');
 380     $copyText.select();
 381     document.execCommand('copy');
 382   });
 383 })();
 384
 385
 386
 387 // Likes
 388 (function() {
 389
 390     ids = new Set();
 391     $(".icon-like").each(
 392         (i, e)=>{
 393             ids.add($(e).attr('data-book'));
 394         }
 395     );
 396     ids = [...ids].join(',');
 397
 398     state = {
 399         liked: [],
 400     };
 401
 402     $(document).on('click', '.icon-like', function(e) {
 403         e.preventDefault();
 404         let liked = $(this).hasClass('icon-liked');
 405         $btn = $(this);
 406         if (liked) {
 407             $.post({
 408                 url: '/ludzie/lektura/' + $(this).attr('data-book-slug') + '/nie_lubie/',
 409                 data: {'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()},
 410                 dataType: 'json',
 411                 success: function() {
 412                     delete state.liked[$btn.attr('data-book')];
 413                     updateLiked($btn);
 414                 },
 415                 error: function() {
 416                     window.location.href = $('#login-link').attr('href');
 417                 }
 418             })
 419         } else {
 420             $.post({
 421                 url: '/ludzie/lektura/' + $(this).attr('data-book-slug') + '/lubie/',
 422                 data: {'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()},
 423                 dataType: 'json',
 424                 success: function() {
 425                     state.liked[$btn.attr('data-book')] = [];
 426                     updateLiked($btn);
 427                 },
 428                 error: function() {
 429                     window.location.href = $('#login-link').attr('href')
 430                 }
 431             });
 432         }
 433     })
 434
 435     // TODO: DYNAMICALLY ADD
 436    $(".add-set-tag input[name=name]").autocomplete({
 437        source: '/ludzie/moje-tagi/',
 438    }).on('autocompleteopen', function() {
 439        $(this).closest('article').addClass('ac-hover');
 440    }).on('autocompleteclose', function() {
 441        $(this).closest('article').removeClass('ac-hover');
 442    });
 443     $(".add-set-tag").on("submit", function(e) {
 444         e.preventDefault();
 445         let $form = $(this);
 446         $.post({
 447             url: $form.attr("action"),
 448             data: $form.serialize(),
 449             success: (data) => {
 450                 updateFromData(data);
 451                 updateLikedAll();
 452                 $('input[name=name]', $form).val('');
 453             }
 454         });
 455     })
 456
 457     $(document).on("click", ".sets .close", function() {
 458         let bookId = $(this).closest("[data-book]").attr('data-book');
 459         $.post({
 460             url: '/ludzie/usun-tag/',
 461             data: {
 462                 csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
 463                 book: bookId,
 464                 slug: $(this).parent().attr('data-set'),
 465             },
 466             success: (data) => {
 467                 updateFromData(data);
 468                 updateLikedAll();
 469             }
 470         });
 471     })
 472
 473
 474     function refreshAll(ids) {
 475         $.ajax('/ludzie/ulubione/?ids=' + ids, {
 476             success: function(result) {
 477                 updateFromData(result);
 478                 updateLikedAll();
 479             },
 480         });
 481     }
 482     refreshAll(ids);
 483     $.refreshLikes = refreshAll;
 484
 485     function updateFromData(data) {
 486         for (pk in data) {
 487             if (data[pk] === null) {
 488                 delete state.liked[pk];
 489             } else {
 490                 state.liked[pk] = data[pk];
 491             }
 492         }
 493     }
 494
 495     function updateLikedAll() {
 496         $(".icon-like").each(
 497             (i, e) => {
 498                 updateLiked(e);
 499             }
 500         )
 501     }
 502
 503     function updateLiked(e) {
 504         let bookId = $(e).attr('data-book');
 505         let liked = bookId in state.liked;
 506         $(e).toggleClass('icon-liked', liked);
 507         let $bookContainer = $('.book-container-' + bookId);
 508         $bookContainer.toggleClass('book-liked', liked);
 509         let $sets = $(".sets", $bookContainer);
 510         $sets.empty();
 511         $.each(state.liked[bookId], (i,e) => {
 512             let $set = $("<span>");
 513             $set.attr("data-set", e.slug);
 514             let $setA = $("<a>").appendTo($set);
 515             $setA.attr("href", e.url);
 516             $setA.text(e.name);
 517             let $setX = $("<a class='close'></a>").appendTo($set);
 518             $sets.append($set);
 519         });
 520     }
 521
 522 })();
 523
 524
 525
 526 // Toggle a class on long press.
 527 (function() {
 528     const TIME = 250;
 529     let timer;
 530
 531     $("[data-longpress]").on("touchstart", (e) => {
 532         $e = $(e.currentTarget);
 533         timer = setTimeout(() => {
 534             $e.toggleClass($e.attr('data-longpress'));
 535         }, TIME);
 536     });
 537
 538     $("[data-longpress]").on("touchend", () => {
 539         clearTimeout(timer);
 540     });
 541 })();
 542
 543
 544
 545 // Update search form filters.
 546 (function() {
 547     $('.j-form-auto').each(function() {
 548         let $form = $(this);
 549         $('input', $form).change(function() {$form.submit()});
 550         $('select', $form).change(function() {$form.submit()});
 551         $('textarea', $form).change(function() {$form.submit()});
 552     });
 553
 554
 555     // experiments
 556     $(".experiment input").on('change', function() {
 557         let name = $(this).attr('name');
 558         let val = $(this).val();
 559         document.cookie = 'EXPERIMENT_' + name + '=' + val + '; path=/; max-age=31536000';
 560         window.location.reload(true);
 561     });
 562
 563     $('.c-lang').on('click', function() {
 564         !$(this).toggleClass('is-open');
 565     });
 566
 567
 568
 569
 570
 571     $(".c-media__settings > i").on('click', function() {
 572         $(".c-media__settings").toggleClass('active');
 573     });
 574
 575     const crisis = document.querySelector(".annoy-banner_crisis-container");
 576     const crisisLink = document.querySelector('.annoy-banner_crisis-container a.action');
 577     if (crisis) {
 578         crisis.addEventListener("click", function() {
 579             crisisLink.click();
 580         });
 581     }
 582
 583 })();