X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/d2a9ebf1eae1ee5fa8a09a7dfea76995274f7716..64ad71354afe2d40af8d33a27778c7ec6ba632af:/src/wolnelektury/static/js/main.js?ds=sidebyside

diff --git a/src/wolnelektury/static/js/main.js b/src/wolnelektury/static/js/main.js
index 9821c7705..5b7f897d7 100644
--- a/src/wolnelektury/static/js/main.js
+++ b/src/wolnelektury/static/js/main.js
@@ -1,97 +1,59 @@
 // JS Menu
 (function () {
-  let button = $('.js-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);
-    }
-  });
-
-  $(document).keyup(function(e) {
-    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);
+    const dialog = document.getElementById('main-menu');
+    let buttonOn = $('.js-menu');
+    let buttonOff = $('.js-menu-close');
+    
+    async function closeMenu() {
+        // Może być od razu dialog.close bez is-closing, gdy przeglądarki nadrobią
+        // https://caniuse.com/wf-display-animation, https://caniuse.com/wf-overlay
+        if (!dialog.open || dialog.classList.contains('is-closing')) return;
+        dialog.classList.add('is-closing');
+        buttonOn.find('.bar').removeClass('animate');
+        buttonOff.find('.bar').removeClass('animate');
+        await Promise.allSettled(dialog.getAnimations().map(a => a.finished));
+        dialog.close();
     }
-  });
-})();
+    dialog.addEventListener('close', () => {
+        dialog.classList.remove('is-closing');
+    });
 
-// 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.querySelector('.js-menu').addEventListener('click', () => {
+        dialog.showModal();
+        buttonOn.find('.bar').addClass('animate');
+        buttonOff.find('.bar').addClass('animate');
     });
 
-    $(document).keyup(function(e) {
-        if (e.keyCode === 27) {
-            menu.removeClass('is-open');
-            menuLinks.attr('tabindex', -1);
-        }
+    dialog.querySelector('.js-menu-close').addEventListener('click', closeMenu);
+    dialog.addEventListener('cancel', e => {
+        e.preventDefault();
+        closeMenu();
     });
+})();
 
-    $(document).click(function() {
-      menu.removeClass('is-open');
-      menuLinks.attr('tabindex', -1);
+
+// Ebook/Audiobook Btns
+(function() {
+    let dialogs = $(".l-button--dialog");
+    dialogs.on('click', function () {
+        let target = $(this).attr('id');
+        $('[data-popup=' + target)[0].showModal();
     });
 
+    $('.c-media__popup__close').on('click', function() {
+        $(this).closest('dialog')[0].close();
+    });
 })();
 
-// Ebook/Audiobook Btns
+
+// Player
 (function() {
-  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');
   });
@@ -104,12 +66,6 @@
     selectItem.removeClass('is-active');
     $(this).addClass('is-active');
   });
-
-  $(document).keyup(function(e) {
-    if (e.keyCode === 27) {
-      $('.c-media__popup').removeClass('is-open');
-    }
-  });
 })();
 
 // Homepage books sliders
@@ -413,7 +369,7 @@
                     updateLiked($btn);
                 },
                 error: function() {
-                    window.location.href = $('#login-link').attr('href');
+                    window.location.href = $('.login-link').attr('href');
                 }
             })
         } else {
@@ -422,11 +378,11 @@
                 data: {'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()},
                 dataType: 'json',
                 success: function() {
-                    state.liked[$btn.attr('data-book')] = [];
+                    state.liked[$btn.attr('data-book')] = [{'favorites': true}];
                     updateLiked($btn);
                 },
                 error: function() {
-                    window.location.href = $('#login-link').attr('href')
+                    window.location.href = $('.login-link').attr('href')
                 }
             });
         }
@@ -502,21 +458,27 @@
 
     function updateLiked(e) {
         let bookId = $(e).attr('data-book');
-        let liked = bookId in state.liked;
-        $(e).toggleClass('icon-liked', liked);
+        let liked = false;
+ 
         let $bookContainer = $('.book-container-' + bookId);
-        $bookContainer.toggleClass('book-liked', liked);
         let $sets = $(".sets", $bookContainer);
         $sets.empty();
         $.each(state.liked[bookId], (i,e) => {
-            let $set = $("<span>");
-            $set.attr("data-set", e.slug);
-            let $setA = $("<a>").appendTo($set);
-            $setA.attr("href", e.url);
-            $setA.text(e.name);
-            let $setX = $("<a class='close'></a>").appendTo($set);
-            $sets.append($set);
+            if (e.favorites) {
+                liked = true;
+            } else {
+                let $set = $("<span>");
+                $set.attr("data-set", e.slug);
+                let $setA = $("<a>").appendTo($set);
+                $setA.attr("href", e.url);
+                $setA.text(e.name);
+                let $setX = $("<a class='close'></a>").appendTo($set);
+                $sets.append($set);
+            }
         });
+
+        $(e).toggleClass('icon-liked', liked);
+        $bookContainer.toggleClass('book-liked', liked);
     }
     
 })();
@@ -560,24 +522,18 @@
         window.location.reload(true);
     });
 
-    $('.c-lang').on('click', function() {
-        !$(this).toggleClass('is-open');
-    });
-
-
-
-
 
     $(".c-media__settings > i").on('click', function() {
         $(".c-media__settings").toggleClass('active');
     });
 
-    const crisis = document.querySelector(".annoy-banner_crisis-container");
-    const crisisLink = document.querySelector('.annoy-banner_crisis-container a.action');
-    if (crisis) {
-	crisis.addEventListener("click", function() {
-	    crisisLink.click();
-	});
-    }
+    $(".annoy-banner-clickable").each(function() {
+        let btn = $("a.action", this)[0];
+        $(this).click((e) => {
+            if (e.target !== btn) {
+                btn.click();
+            }
+        });
+    });
 
 })();