37 lines
1.2 KiB
JavaScript
37 lines
1.2 KiB
JavaScript
const usersWrapper = document.querySelector('#user-items-wrapper');
|
|
const users = document.querySelectorAll('.user');
|
|
let currentUser = 0;
|
|
let isAnimatingUsers = false;
|
|
|
|
function cycleUser(direction) {
|
|
if (isAnimatingUsers) return;
|
|
|
|
const itemWidth = users[0].offsetWidth;
|
|
const oldIndex = currentUser;
|
|
currentUser = (currentUser + direction + users.length) % users.length;
|
|
|
|
const animationOffset = direction * itemWidth;
|
|
|
|
usersWrapper.style.transform = `translateX(${-oldIndex * itemWidth - animationOffset}px)`;
|
|
isAnimatingUsers = true;
|
|
|
|
setTimeout(() => {
|
|
usersWrapper.style.transition = 'none';
|
|
usersWrapper.style.transform = `translateX(-${currentUser * itemWidth}px)`;
|
|
void usersWrapper.offsetHeight; // Trigger reflow
|
|
usersWrapper.style.transition = 'transform 0.3s ease-in-out';
|
|
isAnimatingUsers = false;
|
|
}, 300);
|
|
}
|
|
|
|
function populateUsers() {
|
|
let userObjects = lightdm.users;
|
|
usersWrapper.innerHtml = "";
|
|
userObjects.forEach((u) => {
|
|
let newUser = document.createElement("div");
|
|
newUser.id = u.username;
|
|
newUser.className = "item user";
|
|
newUser.textContent = u.display_name;
|
|
usersWrapper.appendChild(newUser);
|
|
});
|
|
}
|