-
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1 parent
ed9c972
commit e784b4e
Showing
13 changed files
with
322 additions
and
171 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,58 @@ | ||
| // =============================================== | ||
| // Generic Dropdown Toggle Functionality | ||
| // Dropdown Toggle Functionality | ||
| // =============================================== | ||
|
|
||
| // Select all menu buttons | ||
| const $buttons = $(".menu-button"); | ||
| // Select profile dropdown button | ||
| const $profileButton = $(".menu-button-click"); // For click-based dropdowns | ||
| const $hoverButton = $(".menu-button-hover"); // For hover-based dropdowns | ||
|
|
||
| // Toggle the visibility of dropdown menus when a button is clicked | ||
| $buttons.on("click", function(event) { | ||
| // Toggle visibility for click-based dropdown menus | ||
| $profileButton.on("click", function (event) { | ||
| event.stopPropagation(); // Prevent click event from bubbling up | ||
| const $menu = cash(this.nextElementSibling); // Get the menu element next to the button | ||
| const $menu = cash(this.nextElementSibling); // Get the dropdown menu | ||
| $menu.toggleClass("hidden block"); // Toggle visibility classes | ||
|
|
||
| // Update the aria-expanded attribute for accessibility | ||
| // Update aria-expanded for accessibility | ||
| const expanded = $menu.hasClass("block"); | ||
| this.setAttribute("aria-expanded", expanded); | ||
| }); | ||
|
|
||
| // Close dropdown menus when clicking outside of them | ||
| $(document).on("click", function() { | ||
| $buttons.each(function(index, button) { | ||
| // Keep dropdown open when interacting with it | ||
| $(".dropdown-menu").on("click", function (event) { | ||
| event.stopPropagation(); // Prevent click event from bubbling up | ||
| }); | ||
|
|
||
| // Close click-based dropdowns when clicking outside | ||
| $(document).on("click", function () { | ||
| $profileButton.each(function (index, button) { | ||
| const $menu = cash(button.nextElementSibling); | ||
|
|
||
| // Hide the menu and reset aria-expanded if it's visible | ||
| // Hide the menu and reset aria-expanded if visible | ||
| if (!$menu.hasClass("hidden")) { | ||
| $menu.addClass("hidden"); | ||
| $menu.addClass("hidden").removeClass("block"); | ||
| button.setAttribute("aria-expanded", false); | ||
| } | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| // Hover functionality for hover-based dropdowns | ||
| $hoverButton.on("mouseenter", function () { | ||
| const $menu = cash(this.nextElementSibling); // Get the dropdown menu | ||
| $menu.removeClass("hidden").addClass("block"); // Show the menu | ||
| this.setAttribute("aria-expanded", true); | ||
| }); | ||
|
|
||
| // Keep hover-based dropdown open when mouse enters the menu | ||
| $(".hover-dropdown-menu").on("mouseenter", function () { | ||
| const $button = cash(this.previousElementSibling); // Get the hover button | ||
| $button.attr("aria-expanded", true); | ||
| $(this).removeClass("hidden").addClass("block"); // Keep it visible | ||
| }); | ||
|
|
||
| // Close hover-based dropdown when the mouse leaves both the button and menu | ||
| $hoverButton.add(".hover-dropdown-menu").on("mouseleave", function () { | ||
| const $menu = cash(this.nextElementSibling || this); // Get the dropdown menu | ||
| $menu.addClass("hidden").removeClass("block"); // Hide the menu | ||
| const $button = cash($menu.prev()); // Update aria-expanded on the button | ||
| $button.attr("aria-expanded", false); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.