rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-04-03 05:31:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

mockup user select modal (disabled)

Browse Source
This commit is contained in:
RossAscends 2024-04-08 00:18:21 +09:00
parent 11193896b2
commit c0264f1cd6
1 changed files with 71 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
public/scripts/loader.js
View File

@ -1,28 +1,95 @@
const ELEMENT_ID = 'loader'; const ELEMENT_ID = 'loader';
import { delay } from "./utils.js";
export function showLoader() { export function showLoader() {
const container = $('<div></div>').attr('id', ELEMENT_ID); const container = $('<div></div>').attr('id', ELEMENT_ID);
const loader = $('<div></div>').attr('id', 'load-spinner').addClass('fa-solid fa-gear fa-spin fa-3x'); const loader = $('<div></div>').attr('id', 'load-spinner').addClass('fa-solid fa-gear fa-spin fa-3x');
container.append(loader); container.append(loader);
$('body').append(container); $('body').append(container);
} }
export function hideLoader() {
//placeholder user data
const user1 =
{
handle: 'user0',
avatarSrc: 'https://cdn-icons-png.flaticon.com/256/147/147144.png',
name: 'Admin',
password: true
}
const user2 =
{
handle: 'user1',
avatarSrc: 'https://cdn.iconscout.com/icon/free/png-256/free-avatar-370-456322.png',
name: 'Guest',
password: true
}
const userSelectMessage = `
<div class="flex-container flexFlowColumn alignItemsCenter">
<h3>Select User</h3>
<small>This is merely a test. <br> Click a user, and then click Login to proceed.</small>
<div class="flex-container justifyCenter">
<div id="userSelect-${user1.handle}" data-foruser="${user1.name}" class="userSelect menu_button flex-container flexFlowCol"><img class='avatar' src="${user1.avatarSrc}">${user1.name}</div>
<div id="userSelect-${user2.handle}" data-foruser="${user2.name}" class="userSelect menu_button flex-container flexFlowCol"><img class='avatar' src="${user2.avatarSrc}">${user2.name}</div>
<div id="registerNewUserButton" class="menu_button flex-container flexFlowCol">New User</div>
</div>
<div id="passwordEntryBlock" style="display:none;" class="flex-container flexFlowColumn alignItemsCenter">
<h4 id="passwordHeaderText"></h4>
<input id="userPassword" class="text_pole" type="password">
<div id="loginButton" class='menu_button'>Login</div>
</div>
</div>
`
export async function hideLoader() {
//Sets up a 2-step animation. Spinner blurs/fades out, and then the loader shadow does the same. //Sets up a 2-step animation. Spinner blurs/fades out, and then the loader shadow does the same.
$('#load-spinner').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () { $('#load-spinner').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
//console.log('FADING BLUR SCREEN') //$('#loader-spinner')
$(`#${ELEMENT_ID}`) $(`#${ELEMENT_ID}`)
//only fade out the spinner and replace with login screen
.animate({ opacity: 0 }, 300, function () { .animate({ opacity: 0 }, 300, function () {
//console.log('REMOVING LOADER') //dont remove the loader container just yet
$(`#${ELEMENT_ID}`).remove(); $(`#${ELEMENT_ID}`).remove();
}); });
}); });
//console.log('BLURRING SPINNER') //console.log('BLURRING SPINNER')
$('#load-spinner') $('#load-spinner')
.css({ .css({
'filter': 'blur(15px)', 'filter': 'blur(15px)',
'opacity': '0', 'opacity': '0',
}); });
//add login screen
//$('#loader').append(userSelectMessage)
$(".userSelect").on("click", function () {
let selectedUserName = $(this).data('foruser')
$('.userSelect').removeClass('avatar-container selected')
$(this).addClass('avatar-container selected')
console.log(selectedUserName)
$("#passwordHeaderText").text(`Enter password for ${selectedUserName}`)
$("#passwordEntryBlock").show()
})
$("#loginButton").on('click', function () {
$('#loader')
.animate({ opacity: 0 }, 300, function () {
//insert user handle/password verification code here
//.finally:
$('#loader').remove();
});
})
} }