373 lines
18 KiB
JavaScript
373 lines
18 KiB
JavaScript
//room screens
|
|
var splashScreen = `
|
|
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
|
<img src="favicon.svg" style="width: 6rem">
|
|
<herotitle><blah>title.welcome.splash</blah></herotitle>
|
|
<p><blah>desc.welcome.splash</blah>. <span class="aqua">v<span class="clientver aqua">1.0</span></span></p>
|
|
</div>
|
|
`;
|
|
var addDmScreen = `
|
|
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
|
${ICONS.addChat({ width: "3rem" })}
|
|
<herotitle><blah>title.add.chat</blah></herotitle>
|
|
<p><blah>desc.add.chat</blah></p>
|
|
<br>
|
|
<div class="input-group">
|
|
<label for="addchat-username"><blah>title.username</blah></label>
|
|
<input type="text" id="addchat-username" placeholder="name:example.com" class="forminput">
|
|
</div>
|
|
<div class="input-group">
|
|
<button class="submit-button blah" onclick="addDm()">title.add.chat</button>
|
|
</div>
|
|
</div>
|
|
`
|
|
|
|
var createGroupScreen = `
|
|
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
|
${ICONS.createGroup({ width: "3rem" })}
|
|
<herotitle><blah>title.create.group</blah></herotitle>
|
|
<p><blah>desc.create.group</blah></p>
|
|
<br>
|
|
<div class="input-group">
|
|
<label for="creategroup-name"><blah>title.name</blah></label>
|
|
<input type="text" id="creategroup-name" placeholder="{blah(placeholder.create.group.input)}" class="forminput">
|
|
</div>
|
|
<div class="input-group">
|
|
<button class="submit-button blah" onclick="createGroup()">title.create.group</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
var createSpaceScreen = `
|
|
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
|
${ICONS.createSpace({ width: "3rem" })}
|
|
<herotitle><blah>title.create.space</blah></herotitle>
|
|
<p><blah>desc.create.space</blah></p>
|
|
<br>
|
|
<div class="input-group">
|
|
<label for="createspace-name"><blah>title.name</blah></label>
|
|
<input type="text" id="createspace-name" placeholder="{blah(placeholder.create.space.input)}" class="forminput">
|
|
</div>
|
|
<div class="input-group">
|
|
<button class="submit-button blah" onclick="createGroup()">title.create.space</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
var joinSpaceScreen = `
|
|
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
|
${ICONS.joinSpace({ width: "3rem" })}
|
|
<herotitle><blah>title.join.space</blah></herotitle>
|
|
<p><blah>desc.join.space</blah></p>
|
|
<br>
|
|
<div class="input-group">
|
|
<label for="joinspace-id"><blah>title.space.id</blah></label>
|
|
<input type="text" id="joinspace-id" placeholder="id:example.com" class="forminput">
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="joinspace-code"><blah>title.invitation.code</blah></label>
|
|
<input type="text" id="joinspace-code" placeholder="{blah(placeholder.invitation.code)}" class="forminput">
|
|
</div>
|
|
<div class="input-group">
|
|
<button class="submit-button blah" onclick="createGroup()">title.join.space</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
var invitesEmptyState = `
|
|
${ICONS.invites({ width: "4rem" })}
|
|
<br>
|
|
<p><blah>desc.no.invites</blah></p>
|
|
`;
|
|
var invitesLoadingState = `
|
|
${ICONS.invites({ width: "4rem" })}
|
|
<br>
|
|
<p><blah>desc.fetching.invites</blah></p>
|
|
`;
|
|
|
|
var invitesScreen = `
|
|
<div style="display: flex; flex-direction: column; height: 100%;">
|
|
<div style="display: flex; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: var(--border-width) solid var(--light-border-color); flex-shrink: 0;">
|
|
<button id="tab-invites-received" class="submit-button blah tab-inactive" onclick="switchInvitesTab('received')" style="margin:0; padding: 0 1.5rem;">title.received</button>
|
|
<button id="tab-invites-sent" class="submit-button blah tab-inactive" onclick="switchInvitesTab('sent')" style="margin:0; padding: 0 1.5rem;">title.sent</button>
|
|
</div>
|
|
<div id="invites-container" class="list-container empty">
|
|
${invitesLoadingState}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
var notifisEmptyState = `
|
|
${ICONS.notifications({ width: "4rem" })}
|
|
<br>
|
|
<p><blah>desc.no.notifications</blah></p>
|
|
`;
|
|
|
|
var notifisScreen = `
|
|
<div style="display: flex; flex-direction: column; height: 100%;">
|
|
<div style="display: flex; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: var(--border-width) solid var(--light-border-color); flex-shrink: 0;">
|
|
<button id="tab-notifis-all" class="submit-button blah tab-inactive" onclick="switchNotifisTab('all')" style="margin:0; padding: 0 1.5rem;">title.all</button>
|
|
<button id="tab-notifis-unread" class="submit-button blah tab-inactive" onclick="switchNotifisTab('unread')" style="margin:0; padding: 0 1.5rem;">title.unread</button>
|
|
</div>
|
|
<div id="notifis-container" class="list-container empty">
|
|
${notifisEmptyState}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
var invitesEntry = `
|
|
<div class="invite-entry">
|
|
<div class="invite-info">
|
|
<img src="{pfp}" class="invite-pfp" onclick="openProfile('{id}')" style="cursor: pointer;">
|
|
<div class="invite-details">
|
|
<span class="invite-name" onclick="openProfile('{id}')" style="cursor: pointer;">{username}</span>
|
|
<span class="invite-desc"><blah>{desc}</blah></span>
|
|
</div>
|
|
</div>
|
|
<div class="invite-actions">
|
|
{actions}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
var chatScreen = `
|
|
<div style="display: flex; flex-direction: column; height: 100%; width: 100%;">
|
|
<div id="chat-messages" style="flex-grow: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;">
|
|
</div>
|
|
<div id="replying-bar" style="display: none; padding: 0 1rem; border-top: var(--border-width) solid var(--light-border-color); font-size: 0.85rem; justify-content: space-between; align-items: center; background: var(--main-bg-color);">
|
|
<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;">
|
|
<span style="opacity: 0.7;"><blah>title.replying.to</blah> </span><strong id="replying-to-name"></strong>: <span id="replying-to-text" style="opacity: 0.7;"></span>
|
|
</div>
|
|
<button onclick="cancelReply()" style="background: none; border: none; color: var(--text-color); cursor: pointer; padding: 0.2rem; margin-left: 0.5rem;">
|
|
${ICONS.close({ width: "1.2rem", fill: "currentColor" })}
|
|
</button>
|
|
</div>
|
|
<div id="attachments-preview" style="display: none; padding: 0.5rem 1rem; gap: 0.8rem; overflow-x: auto; border-top: var(--border-width) solid var(--light-border-color); background: var(--main-bg-color); align-items: center; flex-shrink: 0;"></div>
|
|
<div style="padding: 1rem; border-top: var(--border-width) solid var(--light-border-color); display: flex; gap: 0.5rem; align-items: flex-end; flex-shrink: 0;">
|
|
<button id="chat-add-attachment" class="submit-button" onclick="clickAddAttachment(this, event)" style="margin: 0; padding: 0; width: 2.5rem; flex-shrink: 0; min-height: 2.5rem; max-height: 8rem;">
|
|
${ICONS.plus({ width: "1.5rem", height: "1.5rem", stroke: "var(--main-bg-color)" })}
|
|
</button>
|
|
<textarea id="chat-input" class="forminput" style="flex-grow: 1; margin: 0; resize: none; min-height: 2.5rem; max-height: 8rem; padding: 0.5rem;" placeholder="{blah(placeholder.message.input)}" onkeydown="handleChatInputKey(event)" oninput="handleChatInputResize(this)"></textarea>
|
|
<button id="chat-sendmessage" class="submit-button" onclick="sendMessage(this)" style="margin: 0; padding: 0; width: 2.5rem; flex-shrink: 0; min-height: 2.5rem; max-height: 8rem;">
|
|
${ICONS.send()}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
//roombars
|
|
var homeRoomBar = `
|
|
<div class="sidebar-section-header">
|
|
<button class="collapse-text-button" id="collapse-dms" onclick="clickCollapseDms()">
|
|
<span><blah>title.dms</blah></span>
|
|
${ICONS.chevronDown({ className: "chevron" })}
|
|
</button>
|
|
<button class="add-action-button" id="add-dm-btn" onclick="clickAddDm()">
|
|
${ICONS.plus()}
|
|
</button>
|
|
</div>
|
|
<div id="dms-wrapper" class="collapsible-wrapper">
|
|
<div class="collapsible-inner">
|
|
<div id="dms-list" class="list-container no-flex-grow empty" style="padding: 0 0.5rem;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-section-header">
|
|
<button class="collapse-text-button" id="collapse-groups" onclick="clickCollapseGroups()">
|
|
<span><blah>title.groups</blah></span>
|
|
${ICONS.chevronDown({ className: "chevron" })}
|
|
</button>
|
|
<button class="add-action-button" id="add-group-btn" onclick="clickAddGroup()">
|
|
${ICONS.plus()}
|
|
</button>
|
|
</div>
|
|
<div id="groups-wrapper" class="collapsible-wrapper">
|
|
<div class="collapsible-inner">
|
|
<div id="groups-list" class="list-container no-flex-grow empty" style="padding: 0 0.5rem;"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
var inboxRoomBar = `
|
|
<div class="sidebar-section-header">
|
|
<button class="collapse-text-button" id="collapse-invites" onclick="gotoInvites()">
|
|
${ICONS.invites({ className: "chevron", width: "24" })}
|
|
<span><blah>title.invites</blah></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="sidebar-section-header">
|
|
<button class="collapse-text-button" id="collapse-notifis" onclick="gotoNotifis()">
|
|
${ICONS.notifications({ className: "chevron", width: "24" })}
|
|
<span><blah>title.notifications</blah></span>
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
|
|
//context menus
|
|
var profileContextMenu = `
|
|
<button onclick="openProfile(window.id)">
|
|
${ICONS.profile()}
|
|
<span class="blah">title.profile</span>
|
|
</button>
|
|
<button onclick="gotoSettings()">
|
|
${ICONS.settingsProfile()}
|
|
<span class="blah">title.settings</span>
|
|
</button>
|
|
<button onclick="logout()">
|
|
${ICONS.delete({ fill: "var(--big-red)" })}
|
|
<span class="blah" style="color: var(--big-red)">title.logout</span>
|
|
</button>
|
|
`;
|
|
var attachmentMenu = `
|
|
<button onclick="document.getElementById('attach-take-photo').click(); fixedContextMenu.classList.remove('show');">
|
|
${ICONS.camera()}
|
|
<span class="blah">action.attachment.take.photo</span>
|
|
</button>
|
|
<button onclick="document.getElementById('attach-media').click(); fixedContextMenu.classList.remove('show');">
|
|
${ICONS.image()}
|
|
<span class="blah">action.attachment.media</span>
|
|
</button>
|
|
<button onclick="document.getElementById('attach-file').click(); fixedContextMenu.classList.remove('show');">
|
|
${ICONS.fileText()}
|
|
<span class="blah">action.attachment.file</span>
|
|
</button>
|
|
<button onclick="console.log('poll'); fixedContextMenu.classList.remove('show');">
|
|
${ICONS.poll()}
|
|
<span class="blah">action.attachment.poll</span>
|
|
</button>
|
|
<input type="file" id="attach-take-photo" accept="image/*" capture="environment" style="display: none;" onchange="handleAttachmentSelection(event)" multiple>
|
|
<input type="file" id="attach-media" accept="image/*,video/*" style="display: none;" onchange="handleAttachmentSelection(event)" multiple>
|
|
<input type="file" id="attach-file" style="display: none;" onchange="handleAttachmentSelection(event)" multiple>
|
|
`;
|
|
|
|
var addSpaceMenu = `
|
|
<button onclick="gotoJoinSpace()">
|
|
${ICONS.joinSpace()}
|
|
<span class="blah">title.join.space</span>
|
|
</button>
|
|
<button onclick="gotoCreateSpace()">
|
|
${ICONS.createSpace()}
|
|
<span class="blah">title.create.space</span>
|
|
</button>`
|
|
var messageContextMenu = `
|
|
<button onclick="replyMessage(currentContextMenuMsgId)">
|
|
${ICONS.replyAction()}
|
|
<span class="blah">title.reply.message</span>
|
|
</button>
|
|
<button id="context-react-btn" onclick="openReactionPicker(event)">
|
|
${ICONS.react()}
|
|
<span class="blah">title.react.message</span>
|
|
</button>
|
|
<button id="context-delete-btn" onclick="deleteMessage(currentContextMenuMsgId)">
|
|
${ICONS.delete({ fill: "var(--big-red)" })}
|
|
<span class="blah" style="color: var(--big-red)">title.delete.message</span>
|
|
</button>
|
|
`;
|
|
|
|
//elements
|
|
var detailsBtn = `<button class="mobile-nav-btn right" onclick="mobileNavDetails()">${ICONS.menu({ width: "24", height: "24" })}</button>`;
|
|
var backBtnHtml = `<button class="mobile-nav-btn" onclick="mobileNavBack()">${ICONS.arrowBack({ width: "24", height: "24" })}</button>`;
|
|
var pinBtnHtml = `<button class="topbar-action-btn room-action-pin right">${ICONS.pin({ width: "24", height: "24" })}</button>`;
|
|
var callBtnHtml = `<button class="topbar-action-btn room-action-call right">${ICONS.call({ width: "24", height: "24" })}</button>`;
|
|
|
|
var settingsBar = `
|
|
<div class="sidebar-section-header">
|
|
<button class="collapse-text-button" id="tab-settings-account" onclick="switchSettingsTab('account')">
|
|
${ICONS.account({ className: "chevron", width: "24" })}
|
|
<span><blah>title.account</blah></span>
|
|
</button>
|
|
</div>
|
|
<div class="sidebar-section-header">
|
|
<button class="collapse-text-button" id="tab-settings-profile" onclick="switchSettingsTab('profile')">
|
|
${ICONS.account({ className: "chevron", width: "24" })}
|
|
<span><blah>title.profile</blah></span>
|
|
</button>
|
|
</div>
|
|
<div class="sidebar-section-header">
|
|
<button class="collapse-text-button" id="tab-settings-appearance" onclick="switchSettingsTab('appearance')">
|
|
${ICONS.settings({ className: "chevron", width: "24" })}
|
|
<span><blah>title.appearance</blah></span>
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
var accountSettings = `
|
|
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
|
${ICONS.profile({ width: "3rem" })}
|
|
<herotitle><blah>title.account</blah></herotitle>
|
|
<br>
|
|
<div class="input-group">
|
|
<label for="settings-username"><blah>title.username</blah></label>
|
|
<input type="text" id="settings-username" class="forminput">
|
|
</div>
|
|
<div class="input-group">
|
|
<button class="submit-button blah" onclick="changeUsername()">action.save</button>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="settings-password"><blah>title.password</blah></label>
|
|
<input type="password" id="settings-password" class="forminput">
|
|
</div>
|
|
<div class="input-group">
|
|
<button class="submit-button blah" onclick="changePassword()">action.save</button>
|
|
</div>
|
|
<br>
|
|
<div class="input-group">
|
|
<label style="color: var(--big-red);"><blah>title.delete.account</blah></label>
|
|
<p style="font-size: 0.85rem; opacity: 0.7; margin-bottom: 0.5rem; margin-left: 0.6rem;"><blah>desc.delete.account</blah></p>
|
|
<button class="submit-button blah" onclick="deleteAccount()" style="background: var(--big-red); color: white;">action.delete.account</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
var profileSettings = `
|
|
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
|
${ICONS.account({ width: "3rem" })}
|
|
<herotitle><blah>title.profile</blah></herotitle>
|
|
<br>
|
|
|
|
<div class="input-group" style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; border: var(--border-width) solid var(--light-border-color); border-radius: 0.8rem; padding: 1rem; width: 100%; max-width: 30rem;">
|
|
<img id="settings-avatar-preview" src="" style="width: 4.5rem; height: 4.5rem; border-radius: 0.8rem; border: var(--border-width) solid rgba(255, 255, 255, 0.2); object-fit: cover; background: var(--main-bg-color);">
|
|
<div style="display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 0.1rem 0;">
|
|
<div style="font-weight: bold;"><blah>title.avatar</blah></div>
|
|
<button class="submit-button blah" style="margin: 0; padding: 0.5rem 1rem; width: auto;" onclick="document.getElementById('settings-avatar-input').click()">action.change.avatar</button>
|
|
<input type="file" id="settings-avatar-input" style="display: none;" accept="image/*" onchange="openCropper(this, 'avatar')">
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="input-group" style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; border: var(--border-width) solid var(--light-border-color); border-radius: 0.8rem; padding: 1rem; width: 100%; max-width: 30rem;">
|
|
<div style="width: 12.4rem; aspect-ratio: 494 / 200; background: var(--main-bg-color); border-radius: 0.4rem; overflow: hidden; display: flex; align-items: center; justify-content: center; border: var(--border-width) solid rgba(255, 255, 255, 0.2);">
|
|
<img id="settings-banner-preview" src="" style="width: 100%; height: 100%; object-fit: cover;">
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 0.1rem 0;">
|
|
<div style="font-weight: bold;"><blah>title.banner</blah></div>
|
|
<button class="submit-button blah" style="margin: 0; padding: 0.5rem 1rem; width: auto;" onclick="document.getElementById('settings-banner-input').click()">action.change.banner</button>
|
|
<input type="file" id="settings-banner-input" style="display: none;" accept="image/*" onchange="openCropper(this, 'banner')">
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
<div class="input-group">
|
|
<label for="settings-bio"><blah>title.bio</blah></label>
|
|
<textarea id="settings-bio" class="forminput" style="min-height: 8rem; padding-top: 0.8rem;"></textarea>
|
|
</div>
|
|
<div class="input-group">
|
|
<button class="submit-button blah" onclick="saveProfile()">action.save.bio</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
var appearanceSettings = `
|
|
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
|
${ICONS.settings({ width: "3rem" })}
|
|
<herotitle><blah>title.appearance</blah></herotitle>
|
|
<br>
|
|
<div class="input-group">
|
|
<label for="settings-language"><blah>title.language</blah></label>
|
|
<select id="settings-language" onchange="changeLanguage(this.value)" style="border-radius: 0.8rem; background-color: rgba(255, 255, 255, 0.05); margin: var(--button-margin); padding: var(--button-margin); padding-left: calc(var(--button-margin) * 2); padding-right: 1.5rem; height: var(--button-height); display: flex; cursor: pointer; align-items: center; justify-content: flex-start; border: var(--border-width) solid var(--light-border-color); color: var(--text-color); font-family: inherit; font-size: inherit; appearance: none; outline: none;">
|
|
<option value="" class="blah">title.loading</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
`;
|