feat: replace vanilla JS by AlpineJS

This commit is contained in:
Florian Briand 2024-08-04 20:56:33 +02:00
parent 5e5267210b
commit 84cd97bc5c
Signed by: florian_briand
GPG Key ID: CC981B9E6B98E70B
3 changed files with 24 additions and 41 deletions

View File

@ -708,6 +708,16 @@ video {
transform-origin: top right;
}
.-translate-y-full {
--tw-translate-y: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
@ -987,6 +997,10 @@ video {
transition-duration: 75ms;
}
.duration-300 {
transition-duration: 300ms;
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

View File

@ -1,49 +1,14 @@
<script type="text/javascript">
// This script is used to toggle the visibility of the profile dropdown
// when the user clicks on the profile button.
function toggleProfileDropdown() {
const profileDropdown = document.getElementById("profile-dropdown");
const isVisible = profileDropdown.getAttribute("data-visible") === "true";
profileDropdown.setAttribute("data-visible", !isVisible);
if (isVisible) {
// Leaving !
profileDropdown.classList.replace("scale-100", "scale-95");
profileDropdown.classList.replace("opacity-100", "opacity-0");
profileDropdown.classList.replace("ease-out", "ease-in");
profileDropdown.classList.replace("duration-200", "duration-75");
} else {
// Entering !
profileDropdown.classList.replace("scale-95", "scale-100");
profileDropdown.classList.replace("opacity-0", "opacity-100");
profileDropdown.classList.replace("ease-in", "ease-out");
profileDropdown.classList.replace("duration-75", "duration-200");
}
}
document.addEventListener("DOMContentLoaded", function () {
const profileButton = document.getElementById("user-menu-button");
const profileDropdown = document.getElementById("profile-dropdown");
// Toggle on profile button click
profileButton.addEventListener("click", function () {
toggleProfileDropdown();
});
// Toggle on click outside of the dropdown
document.addEventListener("click", function (event) {
const isProfileDropdownVisible = profileDropdown.getAttribute("data-visible") === "true";
if (isProfileDropdownVisible && !profileDropdown.contains(event.target) && !profileButton.contains(event.target)) {
toggleProfileDropdown();
}
});
});
</script>
<div
class="opacity-0 absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
role="menu"
id="profile-dropdown"
aria-orientation="vertical"
aria-labelledby="user-menu-button"
tabindex="-1"
x-show="profileOpen"
x-on:click.outside="profileOpen = false"
x-cloak
x-transition
>
<!-- Active: "bg-gray-100", Not Active: "" -->
<a

View File

@ -1,5 +1,8 @@
<!-- Profile dropdown -->
<div class="relative ml-3">
<div
class="relative ml-3"
x-data="{ profileOpen: false }"
>
<div>
<button
type="button"
@ -8,6 +11,7 @@
aria-controls="profile-dropdown"
aria-expanded="false"
aria-haspopup="menu"
x-on:click="profileOpen = ! profileOpen"
>
<span class="absolute -inset-1.5"></span>
<span class="sr-only">Open user menu</span>