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

World Selector&Editor Combined/Lockable/Swappable

Browse Source
This commit is contained in:
RossAscends
2023-05-15 09:27:03 +09:00
parent 817842737e
commit c3fe796059
6 changed files with 158 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
public/index.html
View File

@ -1371,12 +1371,20 @@
<div id="WI-SP-button" class="drawer"> <div id="WI-SP-button" class="drawer">
<div class="drawer-toggle drawer-header"> <div class="drawer-toggle drawer-header">
<div class="drawer-icon fa-solid fa-book-atlas closedIcon " title="World Info & Soft Prompts"></div> <div id="WIDrawerIcon" class="drawer-icon fa-solid fa-book-atlas closedIcon " title="World Info & Soft Prompts"></div>
</div> </div>
<div class="drawer-content closedDrawer"> <div id="WorldInfo" class="drawer-content closedDrawer">
<div id="WorldInfoheader" class="fa-solid fa-grip drag-grabber"></div>
<div id="WI_panel_pin_div" title="Locked = World Editor will stay open">
<input type="checkbox" id="WI_panel_pin">
<label for="WI_panel_pin">
<div class="unchecked fa-solid fa-lock-open "></div>
<div class="checked fa-solid fa-lock "></div>
</label>
</div>
<div id="wi-holder"> <div id="wi-holder">
<h3> <h3>
World Info World Selector
<a href="/notes#worldinfo" class="notes-link" target="_blank"> <a href="/notes#worldinfo" class="notes-link" target="_blank">
<span class="note-link-span">?</span> <span class="note-link-span">?</span>
</a> </a>
@ -1438,6 +1446,41 @@
</label> </label>
</div> </div>
</div> </div>
<div id="world_popup">
<hr>
<div id="world_popup_text">
<!-- <div id="world_cross" class="fa-solid fa-circle-xmark"></div> -->
<div id="world_popup_header" class="flex-container flexGap5">
<!-- Consider changing logo to something else -->
<div class="world_popup_logo_block">
<!-- <img src="img/book2.png" id="world_logo"> -->
<h3>
World Info Editor
<a href="/notes#worldinfoentry" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</h3>
</div>
<div id="OpenAllWIEntries" class="menu_button fa-solid fa-expand"></div>
<div id="CloseAllWIEntries" class="menu_button fa-solid fa-compress"></div>
<!-- <div class="world_popup_expander">&nbsp;</div> -->
<form id="form_rename_world" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<input id="world_popup_name" name="world_popup_name" class="text_pole" maxlength="99" size="32" value="" autocomplete="off">
<input id="world_popup_name_button" class="menu_button" type="submit" value="Rename">
</form>
</div>
</div>
<div id="world_popup_entries_list">
</div>
<div id="world_popup_bottom_holder">
<div id="world_popup_new" class="menu_button">New Entry</div>
<!-- <span class="world_popup_expander">&nbsp;</span> -->
<div id="world_popup_export" class="menu_button">Export</div>
<div id="world_popup_delete" class="menu_button">Delete World</div>
</div>
</div>
</div> </div>
<div id="softprompt_block"> <div id="softprompt_block">
<h4>Soft Prompt</h4> <h4>Soft Prompt</h4>
@ -2065,41 +2108,7 @@
<div id="character_popup_ok" class="menu_button">Save</div> <div id="character_popup_ok" class="menu_button">Save</div>
</div> </div>
<div id="world_popup">
<div id="world_popupheader" class="fa-solid fa-grip drag-grabber"></div>
<div id="world_popup_text">
<div id="world_cross" class="fa-solid fa-circle-xmark"></div>
<div id="world_popup_header" class="flex-container flexGap5">
<!-- Consider changing logo to something else -->
<div class="world_popup_logo_block">
<img src="img/book2.png" id="world_logo">
<h3>
World Info Editor
<a href="/notes#worldinfoentry" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</h3>
</div>
<div id="OpenAllWIEntries" class="menu_button fa-solid fa-expand"></div>
<div id="CloseAllWIEntries" class="menu_button fa-solid fa-compress"></div>
<div class="world_popup_expander">&nbsp;</div>
<form id="form_rename_world" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<input id="world_popup_name" name="world_popup_name" class="text_pole" maxlength="99" size="32" value="" autocomplete="off">
<input id="world_popup_name_button" class="menu_button" type="submit" value="Rename">
</form>
</div>
</div>
<div id="world_popup_entries_list">
</div>
<div id="world_popup_bottom_holder">
<div id="world_popup_new" class="menu_button">New Entry</div>
<!-- <span class="world_popup_expander">&nbsp;</span> -->
<div id="world_popup_export" class="menu_button">Export</div>
<div id="world_popup_delete" class="menu_button">Delete World</div>
</div>
</div>
<div id="shadow_select_chat_popup"> <div id="shadow_select_chat_popup">
<div id="select_chat_popup"> <div id="select_chat_popup">
<div id="select_chat_import"> <!-- import chat popup header --> <div id="select_chat_import"> <!-- import chat popup header -->
@ -2178,6 +2187,7 @@
</div> </div>
</div> </div>
<div id="entry_edit_template" class="template_element"> <div id="entry_edit_template" class="template_element">
<div class="world_entry"> <div class="world_entry">
<form class="world_entry_form"> <form class="world_entry_form">

6
public/script.js
View File

@ -6220,6 +6220,7 @@ $(document).ready(function () {
'#shadow_popup', '#shadow_popup',
'#world_popup', '#world_popup',
'.ui-widget', '.ui-widget',
'.text_pole',
]; ];
for (const id of forbiddenTargets) { for (const id of forbiddenTargets) {
if (clickTarget.closest(id).length > 0) { if (clickTarget.closest(id).length > 0) {
@ -6241,7 +6242,10 @@ $(document).ready(function () {
} }
}); });
$(document).on('click', '.inline-drawer-toggle', function () { $(document).on('click', '.inline-drawer-toggle', function (e) {
if ($(e.target).hasClass('text_pole')) {
return;
};
var icon = $(this).find('.inline-drawer-icon'); var icon = $(this).find('.inline-drawer-icon');
icon.toggleClass('down up'); icon.toggleClass('down up');
icon.toggleClass('fa-circle-chevron-down fa-circle-chevron-up'); icon.toggleClass('fa-circle-chevron-down fa-circle-chevron-up');

70
public/scripts/RossAscends-mods.js
View File

@ -30,11 +30,16 @@ import {
import { sortByCssOrder } from "./utils.js"; import { sortByCssOrder } from "./utils.js";
var NavToggle = document.getElementById("nav-toggle"); var NavToggle = document.getElementById("nav-toggle");
var RPanelPin = document.getElementById("rm_button_panel_pin"); var RPanelPin = document.getElementById("rm_button_panel_pin");
var LPanelPin = document.getElementById("lm_button_panel_pin"); var LPanelPin = document.getElementById("lm_button_panel_pin");
var SelectedCharacterTab = document.getElementById("rm_button_selected_ch"); var WIPanelPin = document.getElementById("WI_panel_pin");
var RightNavPanel = document.getElementById("right-nav-panel"); var RightNavPanel = document.getElementById("right-nav-panel");
var LeftNavPanel = document.getElementById("left-nav-panel") var LeftNavPanel = document.getElementById("left-nav-panel");
var WorldInfo = document.getElementById("WorldInfo");
var SelectedCharacterTab = document.getElementById("rm_button_selected_ch");
var AdvancedCharDefsPopup = document.getElementById("character_popup"); var AdvancedCharDefsPopup = document.getElementById("character_popup");
var ConfirmationPopup = document.getElementById("dialogue_popup"); var ConfirmationPopup = document.getElementById("dialogue_popup");
var AutoConnectCheckbox = document.getElementById("auto-connect-checkbox"); var AutoConnectCheckbox = document.getElementById("auto-connect-checkbox");
@ -412,23 +417,18 @@ function OpenNavPanels() {
if (LoadLocalBool("NavLockOn") == true && LoadLocalBool("NavOpened") == true) { if (LoadLocalBool("NavLockOn") == true && LoadLocalBool("NavOpened") == true) {
//console.log("RA -- clicking right nav to open"); //console.log("RA -- clicking right nav to open");
$("#rightNavDrawerIcon").click(); $("#rightNavDrawerIcon").click();
} else {
/* console.log('didnt see reason to open right nav on load: R-nav locked? ' +
LoadLocalBool("NavLockOn")
+ ' R-nav was open before? ' +
LoadLocalBool("NavOpened" == true)); */
} }
//auto-open L nav if locked and previously open //auto-open L nav if locked and previously open
if (LoadLocalBool("LNavLockOn") == true && LoadLocalBool("LNavOpened") == true) { if (LoadLocalBool("LNavLockOn") == true && LoadLocalBool("LNavOpened") == true) {
console.log("RA -- clicking left nav to open"); console.log("RA -- clicking left nav to open");
$("#leftNavDrawerIcon").click(); $("#leftNavDrawerIcon").click();
} else { }
/* console.log('didnt see reason to open left nav on load: L-Nav Locked? ' +
LoadLocalBool("LNavLockOn") //auto-open WI if locked and previously open
+ ' L-nav was open before? ' + if (LoadLocalBool("WINavLockOn") == true && LoadLocalBool("WINavOpened") == true) {
LoadLocalBool("LNavOpened" == true)); */ console.log("RA -- clicking WI to open");
$("#WIDrawerIcon").click();
} }
} }
@ -438,7 +438,7 @@ dragElement(document.getElementById("sheld"));
dragElement(document.getElementById("left-nav-panel")); dragElement(document.getElementById("left-nav-panel"));
dragElement(document.getElementById("right-nav-panel")); dragElement(document.getElementById("right-nav-panel"));
dragElement(document.getElementById("avatar_zoom_popup")); dragElement(document.getElementById("avatar_zoom_popup"));
dragElement(document.getElementById("world_popup")); dragElement(document.getElementById("WorldInfo"));
@ -547,6 +547,7 @@ function dragElement(elmnt) {
elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
$(elmnt).css("bottom", "unset"); $(elmnt).css("bottom", "unset");
$(elmnt).css("right", "unset"); $(elmnt).css("right", "unset");
$(elmnt).css("margin", "unset");
/* console.log(` /* console.log(`
offsetLeft: ${elmnt.offsetLeft}, offsetTop: ${elmnt.offsetTop} offsetLeft: ${elmnt.offsetLeft}, offsetTop: ${elmnt.offsetTop}
@ -615,7 +616,7 @@ $("document").ready(function () {
if ($(RightNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) { if ($(RightNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
$(RightNavPanel).slideToggle(200, "swing"); $(RightNavPanel).slideToggle(200, "swing");
$(rightNavDrawerIcon).toggleClass('openIcon closedIcon'); //$(rightNavDrawerIcon).toggleClass('openIcon closedIcon');
$(RightNavPanel).toggleClass('openDrawer closedDrawer'); $(RightNavPanel).toggleClass('openDrawer closedDrawer');
} }
} }
@ -631,12 +632,30 @@ $("document").ready(function () {
if ($(LeftNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) { if ($(LeftNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
$(LeftNavPanel).slideToggle(200, "swing"); $(LeftNavPanel).slideToggle(200, "swing");
$(leftNavDrawerIcon).toggleClass('openIcon closedIcon'); //$(leftNavDrawerIcon).toggleClass('openIcon closedIcon');
$(LeftNavPanel).toggleClass('openDrawer closedDrawer'); $(LeftNavPanel).toggleClass('openDrawer closedDrawer');
} }
} }
}); });
$(WIPanelPin).on("click", function () {
SaveLocal("WINavLockOn", $(WIPanelPin).prop("checked"));
if ($(WIPanelPin).prop("checked") == true) {
console.log('adding pin class to WI');
$(WorldInfo).addClass('pinnedOpen');
} else {
console.log('removing pin class from WI');
$(WorldInfo).removeClass('pinnedOpen');
if ($(WorldInfo).hasClass('openDrawer') && $('.openDrawer').length > 1) {
console.log('closing WI after lock removal');
$(WorldInfo).slideToggle(200, "swing");
//$(WorldInfoDrawerIcon).toggleClass('openIcon closedIcon');
$(WorldInfo).toggleClass('openDrawer closedDrawer');
}
}
});
// read the state of right Nav Lock and apply to rightnav classlist // read the state of right Nav Lock and apply to rightnav classlist
$(RPanelPin).prop('checked', LoadLocalBool("NavLockOn")); $(RPanelPin).prop('checked', LoadLocalBool("NavLockOn"));
if (LoadLocalBool("NavLockOn") == true) { if (LoadLocalBool("NavLockOn") == true) {
@ -658,6 +677,18 @@ $("document").ready(function () {
$(LeftNavPanel).addClass('pinnedOpen'); $(LeftNavPanel).addClass('pinnedOpen');
} }
// read the state of left Nav Lock and apply to leftnav classlist
$(WIPanelPin).prop('checked', LoadLocalBool("WINavLockOn"));
if (LoadLocalBool("WINavLockOn") == true) {
//console.log('setting pin class via local var');
$(WorldInfo).addClass('pinnedOpen');
}
if ($(WIPanelPin).prop('checked' == true)) {
console.log('setting pin class via checkbox state');
$(WorldInfo).addClass('pinnedOpen');
}
//save state of Right nav being open or closed //save state of Right nav being open or closed
$("#rightNavDrawerIcon").on("click", function () { $("#rightNavDrawerIcon").on("click", function () {
if (!$("#rightNavDrawerIcon").hasClass('openIcon')) { if (!$("#rightNavDrawerIcon").hasClass('openIcon')) {
@ -672,6 +703,13 @@ $("document").ready(function () {
} else { SaveLocal('LNavOpened', 'false'); } } else { SaveLocal('LNavOpened', 'false'); }
}); });
//save state of Left nav being open or closed
$("#WorldInfo").on("click", function () {
if (!$("#WorldInfo").hasClass('openIcon')) {
SaveLocal('WINavOpened', 'true');
} else { SaveLocal('WINavOpened', 'false'); }
});
var chatbarInFocus = false; var chatbarInFocus = false;
$('#send_textarea').focus(function () { $('#send_textarea').focus(function () {
chatbarInFocus = true; chatbarInFocus = true;

12
public/scripts/power-user.js
View File

@ -797,12 +797,12 @@ function resetMovablePanels() {
document.getElementById("avatar_zoom_popup").style.height = ''; document.getElementById("avatar_zoom_popup").style.height = '';
document.getElementById("avatar_zoom_popup").style.width = ''; document.getElementById("avatar_zoom_popup").style.width = '';
document.getElementById("world_popup").style.top = ''; document.getElementById("WorldInfo").style.top = '';
document.getElementById("world_popup").style.left = ''; document.getElementById("WorldInfo").style.left = '';
document.getElementById("world_popup").style.right = ''; document.getElementById("WorldInfo").style.right = '';
document.getElementById("world_popup").style.bottom = ''; document.getElementById("WorldInfo").style.bottom = '';
document.getElementById("world_popup").style.height = ''; document.getElementById("WorldInfo").style.height = '';
document.getElementById("world_popup").style.width = ''; document.getElementById("WorldInfo").style.width = '';
} }
$(document).ready(() => { $(document).ready(() => {

5
public/scripts/world-info.js
View File

@ -311,7 +311,7 @@ function appendWorldEntry(entry) {
const value = $(this).prop("checked"); const value = $(this).prop("checked");
world_info_data.entries[uid].disable = value; world_info_data.entries[uid].disable = value;
saveWorldInfo(); saveWorldInfo();
console.log(`WI #${entry.uid} disabled? ${world_info_data.entries[uid].disable}`); //console.log(`WI #${entry.uid} disabled? ${world_info_data.entries[uid].disable}`);
}); });
disableInput.prop("checked", entry.disable).trigger("input"); disableInput.prop("checked", entry.disable).trigger("input");
disableInput.siblings(".checkbox_fancy").click(function () { disableInput.siblings(".checkbox_fancy").click(function () {
@ -593,7 +593,8 @@ $(document).ready(() => {
await loadWorldInfoData(); await loadWorldInfoData();
} }
hideWorldEditor(); if (selectedWorld === "None") { hideWorldEditor(); }
if (is_world_edit_open && selectedWorld !== "None") { showWorldEditor() };
saveSettingsDebounced(); saveSettingsDebounced();
}); });

73
public/style.css
View File

@ -911,19 +911,22 @@ input[type="file"] {
#rm_button_characters, #rm_button_characters,
#rm_button_panel_pin_div, #rm_button_panel_pin_div,
#lm_button_panel_pin_div { #lm_button_panel_pin_div,
#WI_button_panel_pin_div {
font-size: 24px; font-size: 24px;
display: inline; display: inline;
} }
#rm_button_panel_pin_div, #rm_button_panel_pin_div,
#lm_button_panel_pin_div { #lm_button_panel_pin_div,
#WI_button_panel_pin_div {
opacity: 0.5; opacity: 0.5;
transition: 0.3s; transition: 0.3s;
} }
#rm_button_panel_pin_div:hover, #rm_button_panel_pin_div:hover,
#lm_button_panel_pin_div:hover { #lm_button_panel_pin_div:hover,
#WI_button_panel_pin_div:hover {
opacity: 1; opacity: 1;
} }
@ -932,32 +935,38 @@ input[type="file"] {
} }
#rm_button_panel_pin, #rm_button_panel_pin,
#lm_button_panel_pin { #lm_button_panel_pin,
#WI_panel_pin {
display: none; display: none;
} }
#rm_button_panel_pin:checked+label, #rm_button_panel_pin:checked+label,
#lm_button_panel_pin:checked+label { #lm_button_panel_pin:checked+label,
#WI_panel_pin:checked+label {
display: inline; display: inline;
} }
#rm_button_panel_pin:checked+label .checked, #rm_button_panel_pin:checked+label .checked,
#lm_button_panel_pin:checked+label .checked { #lm_button_panel_pin:checked+label .checked,
#WI_panel_pin:checked+label .checked {
display: inline; display: inline;
} }
#rm_button_panel_pin:checked+label .unchecked, #rm_button_panel_pin:checked+label .unchecked,
#lm_button_panel_pin:checked+label .unchecked { #lm_button_panel_pin:checked+label .unchecked,
#WI_panel_pin:checked+label .unchecked {
display: none; display: none;
} }
#rm_button_panel_pin:not(:checked)+label .checked, #rm_button_panel_pin:not(:checked)+label .checked,
#lm_button_panel_pin:not(:checked)+label .checked { #lm_button_panel_pin:not(:checked)+label .checked,
#WI_panel_pin:not(:checked)+label .checked {
display: none; display: none;
} }
#rm_button_panel_pin:not(:checked)+label .unchecked, #rm_button_panel_pin:not(:checked)+label .unchecked,
#lm_button_panel_pin:not(:checked)+label .unchecked { #lm_button_panel_pin:not(:checked)+label .unchecked,
#WI_panel_pin:not(:checked)+label .unchecked {
display: inline; display: inline;
} }
@ -1670,20 +1679,20 @@ input[type=search]:focus::-webkit-search-cancel-button {
#world_popup { #world_popup {
display: none; display: none;
background-color: var(--SmartThemeBlurTintColor); /* background-color: var(--SmartThemeBlurTintColor);
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); */
max-width: var(--sheldWidth); /* max-width: var(--sheldWidth); */
max-height: calc(100% - 100px); /* max-height: calc(100% - 100px); */
min-height: 100px; min-height: 100px;
min-width: 100px; min-width: 100px;
position: absolute; /* position: absolute; */
margin-left: auto; /* margin-left: auto;
margin-right: auto; margin-right: auto; */
left: 0; left: 0;
right: 0; right: 0;
top: 40px; /* top: 40px; */
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); */
padding: 10px; /* padding: 10px; */
flex-direction: column; flex-direction: column;
z-index: 3010; z-index: 3010;
border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px;
@ -1753,7 +1762,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
} }
#form_rename_world { #form_rename_world {
margin-right: 50px; /* margin-right: 50px; */
} }
#form_rename_chat { #form_rename_chat {
@ -3490,8 +3499,10 @@ label[for="extensions_autoconnect"] {
} }
.fillRight, .fillRight,
.fillLeft { .fillLeft,
#WorldInfo {
min-width: unset; min-width: unset;
position: fixed;
} }
.fillLeft { .fillLeft {
@ -3846,8 +3857,7 @@ body.movingUI .drag-grabber {
body.movingUI #sheld, body.movingUI #sheld,
body.movingUI .drawer-content, body.movingUI .drawer-content,
body.movingUI #expression-holder, body.movingUI #expression-holder,
body.movingUI #avatar_zoom_popup, body.movingUI #avatar_zoom_popup {
body.movingUI #world_popup {
resize: both; resize: both;
} }
@ -4000,10 +4010,10 @@ body.waifuMode #avatar_zoom_popup {
display: none; display: none;
} }
#world_popup_header { /* #world_popup_header {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} } */
#world_popup_header .world_popup_expander { #world_popup_header .world_popup_expander {
display: none; display: none;
@ -4049,14 +4059,18 @@ body.waifuMode #avatar_zoom_popup {
#sheld, #sheld,
#character_popup, #character_popup,
#world_popup { .drawer-content
height: calc(100svh - 45px);
/* ,
#world_popup */
{
max-height: calc(100svh - 45px);
width: 100% !important; width: 100% !important;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
left: 0 !important; left: 0 !important;
resize: none; resize: none !important;
top: 42px; top: 40px;
} }
#character_popup, #character_popup,
@ -4065,7 +4079,6 @@ body.waifuMode #avatar_zoom_popup {
} }
#character_popup, #character_popup,
#world_popup,
#send_form { #send_form {
border: 1px solid var(--grey30); border: 1px solid var(--grey30);
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));