From 18fd5920eb9683d7587f6d26684b8d0b4844b522 Mon Sep 17 00:00:00 2001 From: ebolam Date: Wed, 10 Aug 2022 09:38:32 -0400 Subject: [PATCH] Pinning preserved as cookie on browser so will survive a page refresh --- static/koboldai.css | 11 ++++-- static/koboldai.js | 93 ++++++++++++++++++++++++++++++++++++++------- 2 files changed, 87 insertions(+), 17 deletions(-) diff --git a/static/koboldai.css b/static/koboldai.css index fd1ac6f8..5a207094 100644 --- a/static/koboldai.css +++ b/static/koboldai.css @@ -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); diff --git a/static/koboldai.js b/static/koboldai.js index eebee863..e3602f9a 100644 --- a/static/koboldai.js +++ b/static/koboldai.js @@ -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(); + } }); \ No newline at end of file