Audiobook player UI updated

[wolnelektury.git] / 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 b79abf8..c456b6c 100644 (file)
--- a/src/wolnelektury/static/2021/scripts/main.js
+++ b/src/wolnelektury/static/2021/scripts/main.js
@@ -30,16 +30,65 @@
 
 // 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');
+
+  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');
+    $('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');
+  });
+
+  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) {
@@ -49,6 +98,40 @@
   });
 })();
 
+// Range
+const rangeInputs = document.querySelectorAll('input[type="range"]')
+
+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
+
+  target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%'
+}
+
+rangeInputs.forEach(input => {
+  input.addEventListener('input', handleInputChange)
+});
+
+// Quotes slider
+(function () {
+  let slider = $('.l-author__quotes__slider');
+
+  slider.slick({
+    slidesToScroll: 1,
+    slidesToShow: 1,
+    infinite: true,
+    dots: true,
+    arrows: false,
+    autoplay: true,
+    autoplaySpeed: 2500
+  });
+})();
+
 // Text overlay toggler
 (function () {
   let overlays = $('.l-article__overlay');
@@ -93,4 +176,29 @@
   }
 
   if($change.length) { change(); }
-})();
\ No newline at end of file
+})();
+
+//Switch
+(function() {
+  let $switchOnce = $('#switch-once');
+  let $switchMonthly = $('#switch-monthly');
+
+  $switchMonthly.on('click', function() {
+    $('.l-checkout__payments__box').removeClass('once');
+  });
+
+  $switchOnce.on('click', function() {
+    $('.l-checkout__payments__box').addClass('once');
+  });
+})();
+
+//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');
+  });
+})();