| 1 | // SPDX-License-Identifier: AGPL-3.0-or-later |
| 2 | |
| 3 | (function () { |
| 4 | function setActivePanel(menu, name) { |
| 5 | menu.querySelectorAll("[data-ref-tab]").forEach(function (tab) { |
| 6 | var active = tab.getAttribute("data-ref-tab") === name; |
| 7 | tab.classList.toggle("is-active", active); |
| 8 | tab.setAttribute("aria-selected", active ? "true" : "false"); |
| 9 | }); |
| 10 | menu.querySelectorAll("[data-ref-panel]").forEach(function (panel) { |
| 11 | panel.hidden = panel.getAttribute("data-ref-panel") !== name; |
| 12 | }); |
| 13 | var input = menu.querySelector("[data-ref-filter]"); |
| 14 | if (input) { |
| 15 | input.value = ""; |
| 16 | input.setAttribute("placeholder", name === "tags" ? "Find a tag" : "Find a branch"); |
| 17 | input.setAttribute("aria-label", name === "tags" ? "Find a tag" : "Find a branch"); |
| 18 | filterPanel(menu); |
| 19 | input.focus(); |
| 20 | } |
| 21 | } |
| 22 | |
| 23 | function filterPanel(menu) { |
| 24 | var input = menu.querySelector("[data-ref-filter]"); |
| 25 | var query = input ? input.value.trim().toLowerCase() : ""; |
| 26 | var panel = Array.prototype.find.call(menu.querySelectorAll("[data-ref-panel]"), function (candidate) { |
| 27 | return !candidate.hidden; |
| 28 | }); |
| 29 | if (!panel) return; |
| 30 | var visible = 0; |
| 31 | panel.querySelectorAll("[data-ref-option]").forEach(function (option) { |
| 32 | var name = (option.getAttribute("data-ref-name") || option.textContent || "").toLowerCase(); |
| 33 | var match = !query || name.indexOf(query) !== -1; |
| 34 | option.hidden = !match; |
| 35 | if (match) visible += 1; |
| 36 | }); |
| 37 | var empty = panel.querySelector("[data-ref-empty]"); |
| 38 | if (empty) empty.hidden = visible !== 0; |
| 39 | } |
| 40 | |
| 41 | document.querySelectorAll("[data-ref-menu]").forEach(function (menu) { |
| 42 | menu.querySelectorAll("[data-ref-tab]").forEach(function (tab) { |
| 43 | tab.addEventListener("click", function () { |
| 44 | setActivePanel(menu, tab.getAttribute("data-ref-tab") || "branches"); |
| 45 | }); |
| 46 | }); |
| 47 | var input = menu.querySelector("[data-ref-filter]"); |
| 48 | if (input) { |
| 49 | input.addEventListener("input", function () { filterPanel(menu); }); |
| 50 | } |
| 51 | menu.querySelectorAll("[data-ref-close]").forEach(function (close) { |
| 52 | close.addEventListener("click", function () { menu.open = false; }); |
| 53 | }); |
| 54 | menu.addEventListener("toggle", function () { |
| 55 | if (menu.open && input) { |
| 56 | setTimeout(function () { input.focus(); }, 0); |
| 57 | } |
| 58 | }); |
| 59 | }); |
| 60 | })(); |