src/wolnelektury/static/2021/scripts/main.js

   1 // JS Menu
   2 (function () {
   3   let button = $('.js-menu');
   4   let menu = $('.l-navigation__menu');
   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       button.find('.bar').addClass('animate');
  12       menuLinks.attr('tabindex', 0);
  13     } else {
  14       $(this).removeClass('is-active');
  15       menu.removeClass('is-open');
  16       button.find('.bar').removeClass('animate');
  17       menuLinks.attr('tabindex', -1);
  18     }
  19   });
  20
  21   $(document).keyup(function(e) {
  22     if (e.keyCode === 27) {
  23       button.removeClass('is-active');
  24       menu.removeClass('is-open');
  25       button.find('.bar').removeClass('animate');
  26       menuLinks.attr('tabindex', -1);
  27     }
  28   });
  29 })();
  30
  31 // Ebook/Audiobook Btns
  32 (function() {
  33   let button = $('.c-media__btn button:not(.l-button--media--full)');
  34   let popupLayer = $('.c-media__popup');
  35   let closeButton = $('.c-media__popup__close');
  36   let playButton = $('.c-player__btn--md');
  37   let chaptersButton = $('.c-player__chapters span');
  38   let select = $('.c-select');
  39   let selectItem = $('.c-select li');
  40   let volumeButton = $('.icon-volume');
  41
  42   /*playButton.on('click', function() {
  43     if($(this).find('.icon').hasClass('icon-play')) {
  44       $(this).find('.icon-play').removeClass('icon-play').addClass('icon-pause');
  45     } else if($(this).find('.icon').hasClass('icon-pause')) {
  46       $(this).find('.icon-pause').removeClass('icon-pause').addClass('icon-play');
  47     }
  48   });*/
  49
  50   button.on('click', function () {
  51     let target = $(this).attr('id');
  52     $('[data-popup=' + target).addClass('is-open');
  53     $('body').addClass('popup-open');
  54   });
  55
  56   closeButton.on('click', function() {
  57     $(this).closest('.c-media__popup').removeClass('is-open');
  58     $('body').removeClass('popup-open');
  59   });
  60
  61   popupLayer.on('click', function(e) {
  62     let _this = $(this);
  63     if($(e.target).is(popupLayer)) {
  64       _this.removeClass('is-open');
  65       $('body').removeClass('popup-open');
  66     }
  67   });
  68
  69   chaptersButton.on('click', function() {
  70     $(this).parent().toggleClass('is-active');
  71   });
  72
  73   select.on('click', function() {
  74     $(this).toggleClass('is-active');
  75   });
  76
  77   selectItem.on('click', function() {
  78     selectItem.removeClass('is-active');
  79     $(this).addClass('is-active');
  80   });
  81
  82   volumeButton.on('click', function() {
  83     if($(this).hasClass('icon-volume')) {
  84       $(this).removeClass('icon-volume').addClass('icon-mute');
  85       $(this).next().val(0);
  86       $(this).next().css('background-size', '0% 100%');
  87     } else if($(this).hasClass('icon-mute')) {
  88       $(this).removeClass('icon-mute').addClass('icon-volume');
  89       $(this).next().val(50);
  90       $(this).next().css('background-size', '50% 100%');
  91     }
  92   });
  93
  94   $(document).keyup(function(e) {
  95     if (e.keyCode === 27) {
  96       $('.c-media__popup').removeClass('is-open');
  97     }
  98   });
  99 })();
 100
 101 // Range
 102 const rangeInputs = document.querySelectorAll('input[type="range"]')
 103
 104 function handleInputChange(e) {
 105   let target = e.target
 106   if (e.target.type !== 'range') {
 107     target = document.getElementById('range')
 108   }
 109   const min = target.min
 110   const max = target.max
 111   const val = target.value
 112
 113   target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%'
 114 }
 115
 116 rangeInputs.forEach(input => {
 117   input.addEventListener('input', handleInputChange)
 118 });
 119
 120 // Quotes slider
 121 (function () {
 122   let slider = $('.l-author__quotes__slider');
 123
 124   slider.slick({
 125     slidesToScroll: 1,
 126     slidesToShow: 1,
 127     infinite: true,
 128     dots: true,
 129     arrows: false,
 130     autoplay: true,
 131     autoplaySpeed: 2500
 132   });
 133 })();
 134
 135 // Text overlay toggler
 136 (function () {
 137   let overlays = $('.l-article__overlay');
 138   let button = $('.l-article__read-more');
 139
 140   overlays.each(function () {
 141     let maxHeight = $(this).attr('data-max-height');
 142     if($(this).outerHeight() > maxHeight) {
 143       $(this).css({'maxHeight': maxHeight+'px'}).addClass('is-active');
 144     } else {
 145       $(this).next('.l-article__read-more').hide();
 146     }
 147   });
 148
 149   button.on('click', function() {
 150     let dataLabel = $(this).attr('data-label');
 151     let dataAction = $(this).attr('data-action');
 152     $(this).parent().find('.l-article__overlay').toggleClass('is-clicked');
 153     if($(this).text() === dataLabel) {
 154       $(this).text(dataAction);
 155     } else {
 156       $(this).text(dataLabel);
 157     }
 158   });
 159 })();
 160
 161 //Zmieniamy się popup
 162 (function() {
 163   let $change = $('.l-change-pop');
 164   function change() {
 165     if(localStorage.getItem('change') === null) {
 166       $change.addClass('show');
 167     } else {
 168       $change.remove();
 169       return false;
 170     }
 171
 172     $change.on('click', '.l-change-pop__close', function () {
 173       $change.slideUp();
 174       localStorage.setItem('change', 'showed');
 175     });
 176   }
 177
 178   if($change.length) { change(); }
 179 })();
 180
 181 //Switch
 182 (function() {
 183   let $switchOnce = $('#switch-once');
 184   let $switchMonthly = $('#switch-monthly');
 185
 186   $switchMonthly.on('click', function() {
 187     $('.l-checkout__payments__box').removeClass('once');
 188   });
 189
 190   $switchOnce.on('click', function() {
 191     $('.l-checkout__payments__box').addClass('once');
 192   });
 193 })();
 194
 195 //Copy function
 196 (function() {
 197   let $copy = $('.js-copy');
 198
 199   $copy.on('click', function() {
 200     let $copyText = $(this).closest('.l-checkout__info__item').find('input');
 201     $copyText.select();
 202     document.execCommand('copy');
 203   });
 204 })();