Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixes for dropdowns #3732

Merged
merged 17 commits into from
Nov 1, 2024
Merged

Fixes for dropdowns #3732

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
77aa114
Fixes for dropdowns
Rieven Oct 24, 2024
b2b2d66
fix JS voor more specific dropdown targets and fix some HTML inconsit…
Rieven Oct 24, 2024
e961801
Update rocky/assets/js/dropdown.js
Rieven Oct 28, 2024
56467a1
Update rocky/assets/css/components/dropdown.scss
Rieven Oct 28, 2024
04a0957
fix some html ids
Rieven Oct 28, 2024
ba3d275
Merge branch 'fix/aria-expanded-set-on-button' of github.com:minvws/n…
Rieven Oct 28, 2024
2674eaa
Fix dropdown buttons and target
Rieven Oct 29, 2024
661a73c
Merge branch 'main' into fix/aria-expanded-set-on-button
Rieven Oct 29, 2024
857d36e
fix lang
Rieven Oct 29, 2024
f14d04f
Merge branch 'main' into fix/aria-expanded-set-on-button
Rieven Oct 29, 2024
4a3ff11
Merge branch 'main' of github.com:minvws/nl-kat-coordination into fix…
Rieven Oct 30, 2024
a57ceca
Merge branch 'fix/aria-expanded-set-on-button' of github.com:minvws/n…
Rieven Oct 30, 2024
9d71739
fix JS and css
Rieven Oct 30, 2024
8199f4e
Merge branch 'main' into fix/aria-expanded-set-on-button
stephanie0x00 Oct 30, 2024
f61a103
Merge branch 'main' into fix/aria-expanded-set-on-button
underdarknl Oct 31, 2024
f9cd964
Merge branch 'main' into fix/aria-expanded-set-on-button
underdarknl Nov 1, 2024
77d4e66
Merge branch 'main' into fix/aria-expanded-set-on-button
underdarknl Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions rocky/assets/css/components/dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@

.dropdown-list {
display: none;
left: 0;
position: absolute;
top: 3.25rem;
z-index: 2;
Expand Down
54 changes: 29 additions & 25 deletions rocky/assets/js/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,31 @@
const dropdowns = document.querySelectorAll(".dropdown");
let activeDropdown = null; // To track the currently active dropdown

const closeActiveDropdown = () => {
if (activeDropdown) {
const activeButton = activeDropdown.querySelector(".dropdown-button");
const activeList = activeDropdown.querySelector(".dropdown-list");

activeButton.setAttribute("aria-expanded", "false");
activeList.classList.remove("open");

activeDropdown = null;
}
};

dropdowns.forEach((dropdown) => {
const dropdownButton = dropdown.querySelector(".dropdown-button");
const dropdownList = dropdown.querySelector(".dropdown-list");

const toggle = (e) => {
const activeButton = document.querySelector(
".dropdown-button[aria-expanded='true']",
);
const isOpen = dropdownButton.getAttribute("aria-expanded") === "true";
const dropdownList = document.getElementById(
dropdownButton.getAttribute("aria-controls"),
);

if (activeButton && activeButton !== dropdownButton) {
const activeList = document.getElementById(
activeButton.getAttribute("aria-controls"),
);
activeButton.setAttribute("aria-expanded", "false");
activeList.classList.remove("open");
}

closeActiveDropdown();

if (!isOpen) {
dropdownButton.setAttribute("aria-expanded", "true");
dropdownList.classList.add("open");
activeDropdown = dropdown;
} else {
if (isOpen) {
dropdownButton.setAttribute("aria-expanded", "false");
dropdownList.classList.remove("open");
activeDropdown = null;
} else {
dropdownButton.setAttribute("aria-expanded", "true");
dropdownList.classList.add("open");
}

e.stopPropagation();
Expand All @@ -38,8 +34,16 @@ dropdowns.forEach((dropdown) => {
dropdownButton.addEventListener("click", toggle);
});

document.addEventListener("click", (e) => {
if (activeDropdown && !activeDropdown.contains(e.target)) {
closeActiveDropdown();
document.addEventListener("click", () => {
const activeButton = document.querySelector(
".dropdown-button[aria-expanded='true']",
);

if (activeButton) {
Rieven marked this conversation as resolved.
Show resolved Hide resolved
const activeList = document.getElementById(
activeButton.getAttribute("aria-controls"),
);
activeButton.setAttribute("aria-expanded", "false");
activeList.classList.remove("open");
}
});
4 changes: 2 additions & 2 deletions rocky/reports/report_types/aggregate_organisation_report/introduction.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
<div class="horizontal-view toolbar">
<h1>{{ report_ooi.name }}</h1>
<div class="dropdown">
<button aria-controls="export-add" class="dropdown-button ghost">
<button aria-controls="download-report" class="dropdown-button ghost">
{% translate "Export" %}<span aria-hidden="true" class="icon ti-chevron-down"></span>
</button>
<div id="export-add" aria-expanded="false" class="dropdown-list">
<div id="download-report" aria-expanded="false" class="dropdown-list">
<ul>
<li>
<a href="{{ report_download_pdf_url }}" target="_blank">{% translate "Download PDF" %}</a>
Expand Down
4 changes: 2 additions & 2 deletions rocky/reports/templates/partials/report_header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
<div class="horizontal-view toolbar">
<h1>{{ report_ooi.name }}</h1>
<div class="dropdown">
<button aria-controls="export-add" class="dropdown-button ghost">
<button aria-controls="download-report" class="dropdown-button ghost">
{% translate "Export" %}<span aria-hidden="true" class="icon ti-chevron-down"></span>
</button>
<div id="export-add" aria-expanded="false" class="dropdown-list">
<div id="download-report" aria-expanded="false" class="dropdown-list">
<ul>
<li>
<a href="{{ report_download_pdf_url }}" target="_blank"><span class="icon ti-download" aria-hidden="true"></span>{% translate "Download report" %} (PDF)</a>
Expand Down
4 changes: 2 additions & 2 deletions rocky/rocky/templates/organizations/organization_member_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@ <h2>
{% if perms.tools.add_organizationmember %}
<div class="horizontal-view toolbar">
<div class="dropdown">
<button aria-controls="export-add" class="dropdown-button ghost">
<button aria-controls="add-member" class="dropdown-button ghost">
{% translate "Add member(s)" %}<span aria-hidden="true" class="icon ti-chevron-down"></span>
</button>
<div id="export-add" aria-expanded="false" class="dropdown-list">
<div id="add-member" aria-expanded="false" class="dropdown-list">
<ul>
<li>
<a href="{% url "organization_member_add_account_type" organization.code %}"><span class="icon ti-plus" aria-hidden="true"></span>{% translate "Manually" %}</a>
Expand Down
17 changes: 8 additions & 9 deletions rocky/rocky/templates/partials/language-switcher.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,11 @@
{{ lang.name_local|title }}
<span aria-hidden="true" class="icon ti-chevron-down"></span>
</button>
<div class="dropdown-list" id="language-switcher">
<ul role="listbox">
{% for language in languages %}
{% get_language_info for language as lang %}
<li lang="{{ language }}"
{% if LANGUAGE_CODE == language %}aria-current="true"{% endif %}>
<ul id="language-switcher" role="listbox" class="dropdown-list">
{% for language in languages %}
{% get_language_info for language as lang %}
{% if LANGUAGE_CODE != language %}
<li>
<a hreflang="{{ language }}"
href="#"
role="option"
Expand All @@ -26,9 +25,9 @@
</button>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endfor %}
</ul>
</div>
<form id="set-language"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As the language in in the url, why is this a form / post?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Woudn't a list of a href's with the current url with the current language replaced by the new language not suffice?

action="{% url "set_language" %}"
Expand Down
4 changes: 2 additions & 2 deletions rocky/rocky/templates/partials/organizations_menu_dropdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@

{% if organizations_including_blocked|length > 0 %}
<div class="dropdown">
<button class="dropdown-button ghost">
<button aria-controls="change-organization" class="dropdown-button ghost">
{% if not organization.code %}
{% translate "Select organization" %}
{% else %}
{{ organization.name }}
{% endif %}
<span class="icon ti-chevron-down"></span>
</button>
<div class="dropdown-list">
<div id="change-organization" class="dropdown-list">
<ul>
<li>
<a href="{% url "crisis_room" %}">{% translate "All organizations" %}</a>
Expand Down
Loading