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

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

View File

@ -784,7 +784,7 @@
<div id="rightNavHolder" class="drawer" style="z-index:3001;">
<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>
<nav id="right-nav-panel" class="drawer-content closedDrawer">
<div id="right-nav-panel-tabs">

View File

@ -4039,24 +4039,18 @@ $(document).ready(function () {
});
$('.drawer-toggle').click(function () {
//$('#top-settings-holder').find('.open').slideToggle(0, "swing");
var icon = $(this).find('.drawer-icon');
var drawer = $(this).parent().find('.drawer-content');
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) {
$('.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
console.log('drawer was closed, so opening');
$('.openDrawer').not('.pinnedOpen').slideToggle(200, "swing");
$('.openIcon').toggleClass('closedIcon openIcon');
$('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
icon.toggleClass('openIcon closedIcon');
drawer.toggleClass('openDrawer closedDrawer'); //mark selected drawer as open if closed
$(this).closest('.drawer').find('.drawer-content').slideToggle(200, "swing"); //open selected drawer
drawer.toggleClass('openDrawer closedDrawer');
$(this).closest('.drawer').find('.drawer-content').slideToggle(200, "swing");
} else if (drawerWasOpenAlready) {
console.log('found the drawer was already open, so closing');
icon.toggleClass('closedIcon openIcon');
$('.openDrawer').slideToggle(200, "swing");
drawer.toggleClass('closedDrawer openDrawer');
@ -4066,14 +4060,14 @@ $(document).ready(function () {
$("html").click(function (e) {
var clickTarget = $(e.target);
var targetParentHasOpenDrawer = clickTarget.parents('.openDrawer').length;
console.log('clicking ' + clickTarget + ' parents have OpenDrawer? ' + targetParentHasOpenDrawer);
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) { // only run if opendrawers actually exist
if (targetParentHasOpenDrawer === 0) { // check if clicked target is NOT part of an OpenDrawer, and if so...
if (clickTarget.hasClass('drawer-icon') == false && !clickTarget.hasClass('openDrawer')) {
if (jQuery.find('.openDrawer').length !== 0) {
if (targetParentHasOpenDrawer === 0) {
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
}
}

View File

@ -262,9 +262,7 @@ function isUrlOrAPIKey(string) {
$("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.
$(AutoConnectCheckbox).prop("checked", LoadLocalBool("AutoConnectEnabled"));
$(AutoLoadChatCheckbox).prop("checked", LoadLocalBool("AutoLoadChatEnabled"));
@ -275,23 +273,49 @@ $("document").ready(function () {
$("#main_api").change(function () { RA_autoconnect(); });
$("#api_button").click(function () { setTimeout(RA_checkOnlineStatus, 100); });
//save NavLock prefs and record state of the Nav being open or closed
$(RightNavPanel).on("change", function () {
if ($(RightNavPanel).hasClass('openDrawer')) {
SaveLocal("NavOpened", true);
} else { SaveLocal("NavOpened", false); }
//toggle pin class when lock toggle clicked
$(PanelPin).on("click", function () {
SaveLocal("NavLockOn", $(PanelPin).prop("checked"));
if ($(PanelPin).prop("checked") == true) {
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
$(AutoConnectCheckbox).on("change", function () { SaveLocal("AutoConnectEnabled", $(AutoConnectCheckbox).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'); });
$("#rm_button_characters").click(function () { //if char list is clicked, in addition to saving it...
SaveLocal('SelectedNavTab', 'rm_button_characters');

View File

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