Merge pull request #79 from mbaraa/dev

issues templates

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

app/static/js/player_shortcuts.js

@@ -42,7 +42,10 @@ const shortcuts = {
  * @param {KeyboardEvent} e
  */
 document.addEventListener("keyup", (e) => {
-  if (document.activeElement.tagName === "INPUT") {
+  if (
+    document.activeElement.tagName === "INPUT" ||
+    document.activeElement.id.startsWith("search-suggestion")
+  ) {
     return;
   }
   const action = shortcuts[e.key];

app/static/js/utils.js

@@ -53,11 +53,51 @@ function copyTextToClipboard(text) {
   textArea.hidden = true;
 }
 
+function menuer() {
+  const menus = [];
+
+  /**
+   * @param {string} id
+   */
+  const __registerPopover = (id) => {
+    menus.push(id);
+    document.body.addEventListener("click", __remove);
+  };
+
+  /**
+   * @param {MouseEvent} e
+   */
+  const __remove = (e) => {
+    for (let i = 0; i < menus.length; i++) {
+      const el = document.getElementById(menus[i]);
+      if (!el) {
+        continue;
+      }
+      const rect = el.getBoundingClientRect();
+      const parentRect = el.parentElement.getBoundingClientRect();
+      if (
+        e.clientX < rect.left ||
+        e.clientX > rect.right ||
+        e.clientY + parentRect.height + 5 < rect.top ||
+        e.clientY > rect.bottom
+      ) {
+        menus.splice(i, 1);
+        el.style.display = "none";
+      }
+    }
+  };
+
+  return [__registerPopover];
+}
+
+const [registerPopover, registerMobileMenu, registerPopup] = menuer();
+
 window.Utils = {
   showLoading,
   hideLoading,
   formatTime,
   formatNumber,
   getTextWidth,
   copyTextToClipboard,
+  registerPopover,
 };

app/views/components/menus/mobile_menu.templ

@@ -47,14 +47,9 @@ templ MobileMenu(id, title string, button, child templ.Component) {
 script toggleMobileMenu(id string) {
     const popover = document.getElementById(`mobile-menu-${id}`);
     if (popover.classList.contains("mobile-menu-collapsed")) {
-        const player = document.getElementById("ze-player");
         const rect = popover.getBoundingClientRect();
         popover.style.bottom = `-${
-            (window.innerHeight-(rect.y+rect.height)) -
-            65 -
-            (!player.classList.contains("hidden")?
-            player.getBoundingClientRect().height + 5:
-            0)
+            (window.innerHeight-(rect.y+rect.height))
         }px`
         popover.style.height = (
             popover.children[0].getBoundingClientRect().height + 4 +

app/views/components/menus/popover.templ

@@ -30,13 +30,9 @@ templ Popover(id, title string, button, child templ.Component) {
 }
 
 script toggleTheThing(id string) {
-    const popover = document.getElementById(`popover-${id}`);
-    popover.addEventListener("keydown", (e) => {
-        if (e.key === "Escape" && popover.style.display === "block") {
-            popover.style.display = "none";
-        }
-    });
-
+    id = `popover-${id}`;
+    Utils.registerPopover(id);
+    const popover = document.getElementById(id);
     if (popover.style.display !== "block") {
       popover.style.display = "block";
       popover.scrollIntoView({ block: "nearest" });