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

right nav (now on top) lock and open/close preferences

Browse Source 
are now remembered between page reloads.
lock prevents right nav drawer from closing when clicking away
or when opening other drawers.
This commit is contained in:
RossAsscends
2023-03-22 22:47:10 +09:00
parent a96ff7049c
commit 862ac3fed8
4 changed files with 62 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -784,7 +784,7 @@
<div id="rightNavHolder" class="drawer" style="z-index:3001;"> <div id="rightNavHolder" class="drawer" style="z-index:3001;">
<div id="unimportantYes" class="drawer-toggle drawer-header"> <div id="unimportantYes" class="drawer-toggle drawer-header">
<div class="drawer-icon icon-idcard closedIcon"></div> <div id="rightNavDrawerIcon" class="drawer-icon icon-idcard closedIcon"></div>
</div> </div>
<nav id="right-nav-panel" class="drawer-content closedDrawer"> <nav id="right-nav-panel" class="drawer-content closedDrawer">
<div id="right-nav-panel-tabs"> <div id="right-nav-panel-tabs">

30
public/script.js
View File

@ -4039,24 +4039,18 @@ $(document).ready(function () {
}); });
$('.drawer-toggle').click(function () { $('.drawer-toggle').click(function () {
//$('#top-settings-holder').find('.open').slideToggle(0, "swing");
var icon = $(this).find('.drawer-icon'); var icon = $(this).find('.drawer-icon');
var drawer = $(this).parent().find('.drawer-content'); var drawer = $(this).parent().find('.drawer-content');
var drawerWasOpenAlready = $(this).parent().find('.drawer-content').hasClass('openDrawer'); var drawerWasOpenAlready = $(this).parent().find('.drawer-content').hasClass('openDrawer');
var iconWasOpenAlready = $(this).find('.drawer-icon').hasClass('openicon');
console.log('Draw Open? ' + drawerWasOpenAlready + ' Icon Open? ' + iconWasOpenAlready);
if (!drawerWasOpenAlready) { if (!drawerWasOpenAlready) {
$('.openDrawer').slideToggle(200, "swing") //close all open drawers $('.openDrawer').not('.pinnedOpen').slideToggle(200, "swing");
$('.openIcon').toggleClass('closedIcon openIcon'); //set all icons to closed state $('.openIcon').toggleClass('closedIcon openIcon');
$('.openDrawer').toggleClass('closedDrawer openDrawer'); //set all drawers to closed state $('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
console.log('drawer was closed, so opening');
icon.toggleClass('openIcon closedIcon'); icon.toggleClass('openIcon closedIcon');
drawer.toggleClass('openDrawer closedDrawer'); //mark selected drawer as open if closed drawer.toggleClass('openDrawer closedDrawer');
$(this).closest('.drawer').find('.drawer-content').slideToggle(200, "swing"); //open selected drawer $(this).closest('.drawer').find('.drawer-content').slideToggle(200, "swing");
} else if (drawerWasOpenAlready) { } else if (drawerWasOpenAlready) {
console.log('found the drawer was already open, so closing');
icon.toggleClass('closedIcon openIcon'); icon.toggleClass('closedIcon openIcon');
$('.openDrawer').slideToggle(200, "swing"); $('.openDrawer').slideToggle(200, "swing");
drawer.toggleClass('closedDrawer openDrawer'); drawer.toggleClass('closedDrawer openDrawer');
@ -4066,14 +4060,14 @@ $(document).ready(function () {
$("html").click(function (e) { $("html").click(function (e) {
var clickTarget = $(e.target); var clickTarget = $(e.target);
var targetParentHasOpenDrawer = clickTarget.parents('.openDrawer').length; var targetParentHasOpenDrawer = clickTarget.parents('.openDrawer').length;
console.log('clicking ' + clickTarget + ' parents have OpenDrawer? ' + targetParentHasOpenDrawer); if (clickTarget.hasClass('drawer-icon') == false && !clickTarget.hasClass('openDrawer')) {
if (clickTarget.hasClass('drawer-icon') == false && !clickTarget.hasClass('openDrawer')) { // don't run this check on drawer icons, as causes insta-closes if (jQuery.find('.openDrawer').length !== 0) {
if (jQuery.find('.openDrawer').length !== 0) { // only run if opendrawers actually exist if (targetParentHasOpenDrawer === 0) {
if (targetParentHasOpenDrawer === 0) { // check if clicked target is NOT part of an OpenDrawer, and if so... console.log($('.openDrawer').not('.pinnedOpen').length);
$('.openDrawer').not('.pinnedOpen').slideToggle(200, "swing");
$('.openIcon').toggleClass('closedIcon openIcon');
$('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
$('.openDrawer').slideToggle(200, "swing") //close all open drawers
$('.openIcon').toggleClass('closedIcon openIcon'); //set all icons to closed state
$('.openDrawer').toggleClass('closedDrawer openDrawer'); //set all drawers to closed state
} }
} }

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

@ -262,9 +262,7 @@ function isUrlOrAPIKey(string) {
$("document").ready(function () { $("document").ready(function () {
// read the state of Nav Lock and whether the nav was open or not before page load.
$(PanelPin).prop('checked', LoadLocalBool("NavLockOn"));
if (LoadLocalBool("NavLockOn") == true) { $(NavToggle).prop("checked", LoadLocalBool("NavOpened")); }
// read the state of AutoConnect and AutoLoadChat. // read the state of AutoConnect and AutoLoadChat.
$(AutoConnectCheckbox).prop("checked", LoadLocalBool("AutoConnectEnabled")); $(AutoConnectCheckbox).prop("checked", LoadLocalBool("AutoConnectEnabled"));
$(AutoLoadChatCheckbox).prop("checked", LoadLocalBool("AutoLoadChatEnabled")); $(AutoLoadChatCheckbox).prop("checked", LoadLocalBool("AutoLoadChatEnabled"));
@ -275,23 +273,49 @@ $("document").ready(function () {
$("#main_api").change(function () { RA_autoconnect(); }); $("#main_api").change(function () { RA_autoconnect(); });
$("#api_button").click(function () { setTimeout(RA_checkOnlineStatus, 100); }); $("#api_button").click(function () { setTimeout(RA_checkOnlineStatus, 100); });
//save NavLock prefs and record state of the Nav being open or closed //toggle pin class when lock toggle clicked
$(RightNavPanel).on("change", function () { $(PanelPin).on("click", function () {
if ($(RightNavPanel).hasClass('openDrawer')) { SaveLocal("NavLockOn", $(PanelPin).prop("checked"));
SaveLocal("NavOpened", true); if ($(PanelPin).prop("checked") == true) {
} else { SaveLocal("NavOpened", false); } console.log('adding pin class to right nav');
$(RightNavPanel).addClass('pinnedOpen');
} else {
console.log('removing pin class from right nav');
$(RightNavPanel).removeClass('pinnedOpen');
}
}); });
$(PanelPin).on("change", function () { SaveLocal("NavLockOn", $(PanelPin).prop("checked")); }); // read the state of Nav Lock and apply to rightnav classlist
$(PanelPin).prop('checked', LoadLocalBool("NavLockOn"));
if (LoadLocalBool("NavLockOn") == true) {
console.log('setting pin class via local var');
$(RightNavPanel).addClass('pinnedOpen');
}
if ($(PanelPin).prop('checked' == true)) {
console.log('setting pin class via checkbox state');
$(RightNavPanel).addClass('pinnedOpen');
}
//save state of nav being open or closed
$("#rightNavDrawerIcon").on("click", function () {
if (!$("#rightNavDrawerIcon").hasClass('openIcon')) {
SaveLocal('NavOpened', 'true');
} else { SaveLocal('NavOpened', 'false'); }
});
if (LoadLocalBool("NavLockOn") == true && LoadLocalBool("NavOpened") == true) {
$("#rightNavDrawerIcon").click();
} else {
console.log('didnt see reason to open nav on load: ' +
LoadLocalBool("NavLockOn")
+ ' nav open pref' +
LoadLocalBool("NavOpened" == true));
}
//save AutoConnect and AutoLoadChat prefs //save AutoConnect and AutoLoadChat prefs
$(AutoConnectCheckbox).on("change", function () { SaveLocal("AutoConnectEnabled", $(AutoConnectCheckbox).prop("checked")); }); $(AutoConnectCheckbox).on("change", function () { SaveLocal("AutoConnectEnabled", $(AutoConnectCheckbox).prop("checked")); });
$(AutoLoadChatCheckbox).on("change", function () { SaveLocal("AutoLoadChatEnabled", $(AutoLoadChatCheckbox).prop("checked")); }); $(AutoLoadChatCheckbox).on("change", function () { SaveLocal("AutoLoadChatEnabled", $(AutoLoadChatCheckbox).prop("checked")); });
$("#rm_button_extensions").click(function () {
SaveLocal('SelectedNavTab', 'rm_button_extensions');
});
$("#rm_button_settings").click(function () { SaveLocal('SelectedNavTab', 'rm_button_settings'); });
$(SelectedCharacterTab).click(function () { SaveLocal('SelectedNavTab', 'rm_button_selected_ch'); }); $(SelectedCharacterTab).click(function () { SaveLocal('SelectedNavTab', 'rm_button_selected_ch'); });
$("#rm_button_characters").click(function () { //if char list is clicked, in addition to saving it... $("#rm_button_characters").click(function () { //if char list is clicked, in addition to saving it...
SaveLocal('SelectedNavTab', 'rm_button_characters'); SaveLocal('SelectedNavTab', 'rm_button_characters');

22
public/scripts/f-localStorage.js
View File

@ -2,24 +2,26 @@
export function SaveLocal(target, val) { export function SaveLocal(target, val) {
localStorage.setItem(target, val); localStorage.setItem(target, val);
console.log('SaveLocal -- '+target+' : '+val); console.log('SaveLocal -- ' + target + ' : ' + val);
} }
export function LoadLocal(target) { export function LoadLocal(target) {
console.log('LoadLocal -- ' + target);
return localStorage.getItem(target); return localStorage.getItem(target);
}
export function LoadLocalBool(target){ }
let result = localStorage.getItem(target) === 'true'; export function LoadLocalBool(target) {
return result; let result = localStorage.getItem(target) === 'true';
} return result;
}
export function CheckLocal() { export function CheckLocal() {
console.log("----------local storage---------"); console.log("----------local storage---------");
var i; var i;
for (i = 0; i < localStorage.length; i++) { for (i = 0; i < localStorage.length; i++) {
console.log(localStorage.key(i) +" : " +localStorage.getItem(localStorage.key(i))); console.log(localStorage.key(i) + " : " + localStorage.getItem(localStorage.key(i)));
} }
console.log("------------------------------"); console.log("------------------------------");
} }
export function ClearLocal() {localStorage.clear();console.log('Removed All Local Storage');} export function ClearLocal() { localStorage.clear(); console.log('Removed All Local Storage'); }
///////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////