sugary/LarpixClient
1
0
Fork 0
forked from olcxjas-softworks/LarpixClient
Code Pull requests Activity

Add example notifications and invites tab and improve ux

Browse source
This commit is contained in:
olcxja 2026-05-19 23:28:08 +02:00
commit f63f8dd77c
8 changed files with 264 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

98
webroot/main.js
View file

@ -687,7 +687,15 @@ function showFixedContextMenu(rect, html) {
fixedContextMenu.classList.add("show");
}
var currentRoomsBarTitle = null;
var currentRoomsBarHtml = null;
async function switchRoomsBar(title, content) {
if (currentRoomsBarTitle === title && currentRoomsBarHtml === content) return;
currentRoomsBarTitle = title;
currentRoomsBarHtml = content;
let roomsTopBarTransition = roomsTopBar.children.item(0);
roomsBar.style.transform = "scale(0.85)";
@ -731,8 +739,23 @@ async function switchRoomsBar(title, content) {
roomsTopBarTransition.style.transform = "";
roomsTopBarTransition.style.opacity = "";
}
var currentRoomContentTitle = null;
var currentRoomContentHtml = null;
async function switchRoomContent(title, content, showRoomBar, icon = "", skipMobileSlide = false)
{
if (currentRoomContentTitle === title && currentRoomContentHtml === content) {
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
if (window.innerWidth <= 52 * rem && !skipMobileSlide) {
if (title != "title.splash") { //do not show splash on mobile
mainScreen.classList.remove('mobile-details');
mainScreen.classList.add('mobile-content');
}
}
return;
}
currentRoomContentTitle = title;
currentRoomContentHtml = content;
let roomsTopBarTransition = roomTopBar.children.item(0);
roomContentMain.style.transform = "scale(0.85)";
@ -791,8 +814,14 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
}
var currentDetailsContentTitle = null;
var currentDetailsContentHtml = null;
async function switchDetailsContent(title, content)
{
if (currentDetailsContentTitle === title && currentDetailsContentHtml === content) return;
currentDetailsContentTitle = title;
currentDetailsContentHtml = content;
let roomsTopBarTransition = detailsTopBar.children.item(0);
roomDetailsMain.style.transform = "scale(0.85)";
@ -925,11 +954,51 @@ function popstate()
function gotoSideProfilePopup() {
}
function gotoInbox() {
function setActiveRoombarItem(itemId) {
let items = document.querySelectorAll('.collapse-text-button');
items.forEach(item => item.classList.remove('selected'));
if (itemId) {
let activeItem = document.getElementById(itemId);
if (activeItem) activeItem.classList.add('selected');
}
}
function switchInvitesTab(tab) {
if (!document.getElementById(`tab-invites-${tab}`).classList.contains('tab-inactive')) return;
document.getElementById('tab-invites-received').classList.add('tab-inactive');
document.getElementById('tab-invites-sent').classList.add('tab-inactive');
document.getElementById(`tab-invites-${tab}`).classList.remove('tab-inactive');
}
function switchNotifisTab(tab) {
if (!document.getElementById(`tab-notifis-${tab}`).classList.contains('tab-inactive')) return;
document.getElementById('tab-notifis-all').classList.add('tab-inactive');
document.getElementById('tab-notifis-unread').classList.add('tab-inactive');
document.getElementById(`tab-notifis-${tab}`).classList.remove('tab-inactive');
}
async function gotoInbox() {
if (roomsBarContainer) roomsBarContainer.style.display = ""; //show roombar
setActiveSidebarIndicator(sidebarInboxIndicator);
switchRoomsBar("title.inbox", inboxRoomBar);
gotoInvites();
await switchRoomsBar("title.inbox", inboxRoomBar);
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
if (window.innerWidth > 52 * rem) {
gotoInvites();
}
}
function gotoInvites() {
setActiveRoombarItem('collapse-invites');
switchRoomContent("title.invites", invitesScreen, false);
}
function gotoNotifis() {
setActiveRoombarItem('collapse-notifis');
switchRoomContent("title.notifications", notifisScreen, false);
}
function gotoCreateSpace() {
@ -949,6 +1018,7 @@ function gotoHome() {
setActiveSidebarIndicator(sidebarHomeIndicator);
switchRoomContent("title.splash", splashScreen, false);
switchRoomsBar("title.home", homeRoomBar);
setActiveRoombarItem(null);
}
function setActiveSidebarIndicator(element, isTemporary = false) {
@ -972,11 +1042,15 @@ function mobileNavBack() {
setActiveSidebarIndicator(currentMainIndicator);
} else {
setActiveRoombarItem(null);
if (roomsBarContainer) {
roomsBarContainer.style.display = ""; //restore roombar on mobile
void roomsBarContainer.offsetWidth;
}
mainScreen.classList.remove('mobile-content');
setActiveSidebarIndicator(currentMainIndicator);
if (roomsBarContainer) roomsBarContainer.style.display = ""; //restore roombar on mobile
}
}
function mobileNavDetails() {
@ -1026,10 +1100,18 @@ document.addEventListener('touchend', e => {
activeTouchButton.classList.remove('is-pressed');
if (!touchMoved) {
if (e.cancelable) {
e.preventDefault();
if (activeTouchButton.tagName !== 'INPUT') {
if (document.activeElement && document.activeElement.tagName === 'INPUT') {
document.activeElement.blur();
}
if (e.cancelable) {
e.preventDefault();
}
activeTouchButton.click();
} else {
activeTouchButton.focus();
}
activeTouchButton.click();
}
activeTouchButton = null;
}