rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

Pinning preserved as cookie on browser so will survive a page refresh

Browse Source
This commit is contained in:
ebolam
2022-08-10 09:38:32 -04:00
parent 384199f9d5
commit 18fd5920eb
2 changed files with 87 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
static/koboldai.css
View File

@@ -12,6 +12,7 @@
:root {
--flyout_menu_closed_width: 0px;
--setting_menu_closed_width_no_pins_width: 0px;
--background: #222f39;
--text: white;
--text_to_ai_color: #CCECFF;
@@ -483,6 +484,10 @@
width: var(--flyout_menu_width);
}
.rightSideMenu.pinned {
width: var(--flyout_menu_width);
}
.rightSideMenu .flyout_menu_contents {
overflow-x: hidden;
overflow-y: auto;
@@ -585,7 +590,7 @@ body {
transition: margin-left .5s;
display: grid;
height: 98vh;
margin-left: var(--flyout_menu_width);
margin-left: var(--setting_menu_closed_width_no_pins_width);
margin-right: var(--flyout_menu_closed_width);
grid-template-areas: "menuicon gamescreen options lefticon"
"menuicon inputrow inputrow lefticon";
@@ -598,9 +603,9 @@ body {
.main-grid.story_pinned {
margin-left: var(--flyout_menu_closed_width);
margin-right: var(--flyout_menu_width);
grid-template-areas: "menuicon options gamescreen lefticon"
grid-template-areas: "menuicon gamescreen options lefticon"
"menuicon inputrow inputrow lefticon";
grid-template-columns: 30px 30% auto 30px;
grid-template-columns: 30px auto 30% 30px;
}
.main-grid.settings_pinned.story_pinned {
margin-left: var(--flyout_menu_width);

93
static/koboldai.js
View File

@@ -1340,6 +1340,15 @@ function send_world_info(uid) {
}
//--------------------------------------------General UI Functions------------------------------------
function preserve_game_space(preserve) {
var r = document.querySelector(':root');
if (preserve) {
r.style.setProperty('--setting_menu_closed_width_no_pins_width', '0px');
} else {
r.style.setProperty('--setting_menu_closed_width_no_pins_width', '450px');
}
}
function do_biases(data) {
//console.log(data);
//clear out our old bias lines
@@ -1920,30 +1929,76 @@ function toggle_flyout_right(x) {
function toggle_settings_pin_flyout() {
if (document.getElementById("SideMenu").classList.contains("pinned")) {
document.getElementById("SideMenu").classList.remove("pinned");
document.getElementById("main-grid").classList.remove("settings_pinned");
document.getElementById("setting_menu_icon").classList.remove("hidden");
settings_unpin();
} else {
document.getElementById("setting_menu_icon").classList.remove("change");
document.getElementById("setting_menu_icon").classList.add("hidden");
document.getElementById("SideMenu").classList.add("pinned");
document.getElementById("main-grid").classList.add("settings_pinned");
settings_pin();
}
}
function settings_pin() {
setCookie("Settings_Pin", "true");
document.getElementById("SideMenu").classList.remove("open");
document.getElementById("main-grid").classList.remove("menu-open");
document.getElementById("setting_menu_icon").classList.remove("change");
document.getElementById("setting_menu_icon").classList.add("hidden");
document.getElementById("SideMenu").classList.add("pinned");
document.getElementById("main-grid").classList.add("settings_pinned");
}
function settings_unpin() {
setCookie("Settings_Pin", "false");
document.getElementById("SideMenu").classList.remove("pinned");
document.getElementById("main-grid").classList.remove("settings_pinned");
document.getElementById("setting_menu_icon").classList.remove("hidden");
}
function toggle_story_pin_flyout() {
if (document.getElementById("rightSideMenu").classList.contains("pinned")) {
document.getElementById("rightSideMenu").classList.remove("pinned");
document.getElementById("main-grid").classList.remove("story_pinned");
document.getElementById("story_menu_icon").classList.remove("hidden");
story_unpin();
} else {
document.getElementById("rightSideMenu").classList.add("pinned");
document.getElementById("main-grid").classList.add("story_pinned");
document.getElementById("story_menu_icon").classList.remove("change");
document.getElementById("story_menu_icon").classList.add("hidden");
story_pin();
}
}
function story_pin() {
setCookie("Story_Pin", "true");
document.getElementById("rightSideMenu").classList.remove("open");
document.getElementById("main-grid").classList.remove("story_menu-open");
document.getElementById("rightSideMenu").classList.add("pinned");
document.getElementById("main-grid").classList.add("story_pinned");
document.getElementById("story_menu_icon").classList.remove("change");
document.getElementById("story_menu_icon").classList.add("hidden");
}
function story_unpin() {
setCookie("Story_Pin", "false");
document.getElementById("rightSideMenu").classList.remove("pinned");
document.getElementById("main-grid").classList.remove("story_pinned");
document.getElementById("story_menu_icon").classList.remove("hidden");
}
function setCookie(cname, cvalue, exdays=60) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function detect_enter_submit(e) {
if (((e.code == "Enter") || (e.code == "NumpadEnter")) && !(shift_down)) {
if (typeof e.stopPropagation != "undefined") {
@@ -1989,4 +2044,14 @@ $(document).ready(function(){
document.onkeydown = detect_shift_down;
document.onkeyup = detect_shift_up;
document.getElementById("input_text").onkeydown = detect_enter_submit;
if (getCookie("Settings_Pin") == "false") {
settings_unpin();
} else {
settings_pin();
}
if (getCookie("Story_Pin") == "true") {
story_pin();
} else {
story_unpin();
}
});