Accessibility fixes

[wolnelektury.git] / src / wolnelektury / static / js / main.js

diff --git a/src/wolnelektury/static/js/main.js b/src/wolnelektury/static/js/main.js
index b224511..b646bf4 100644 (file)
--- a/src/wolnelektury/static/js/main.js
+++ b/src/wolnelektury/static/js/main.js
@@ -1,67 +1,37 @@
 // 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();
     }
-  });
-})();
-
-// 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;
+    dialog.addEventListener('close', () => {
+        dialog.classList.remove('is-closing');
     });
 
-    $(document).keyup(function(e) {
-        if (e.keyCode === 27) {
-            menu.removeClass('is-open');
-            menuLinks.attr('tabindex', -1);
-        }
+    document.querySelector('.js-menu').addEventListener('click', () => {
+        dialog.showModal();
+        buttonOn.find('.bar').addClass('animate');
+        buttonOff.find('.bar').addClass('animate');
     });
 
-    $(document).click(function() {
-      menu.removeClass('is-open');
-      menuLinks.attr('tabindex', -1);
+    dialog.querySelector('.js-menu-close').addEventListener('click', closeMenu);
+    dialog.addEventListener('cancel', e => {
+        e.preventDefault();
+        closeMenu();
     });
-
 })();
 
+
 // Ebook/Audiobook Btns
 (function() {
   let button = $('.c-media__btn button:not(.l-button--media--full)');
@@ -566,21 +536,17 @@
         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');
     });
 
     $(".annoy-banner-clickable").each(function() {
-        $(this).click(() => {
-            $("a.action", this).click();
+        let btn = $("a.action", this)[0];
+        $(this).click((e) => {
+            if (e.target !== btn) {
+                btn.click();
+            }
         });
     });