From c3fe796059f504ca0361a8edd9de32f61f1b10ee Mon Sep 17 00:00:00 2001 From: RossAscends <124905043+RossAscends@users.noreply.github.com> Date: Mon, 15 May 2023 09:27:03 +0900 Subject: [PATCH] World Selector&Editor Combined/Lockable/Swappable --- public/index.html | 84 +++++++++++++++++------------- public/script.js | 6 ++- public/scripts/RossAscends-mods.js | 70 +++++++++++++++++++------ public/scripts/power-user.js | 12 ++--- public/scripts/world-info.js | 5 +- public/style.css | 73 +++++++++++++++----------- 6 files changed, 158 insertions(+), 92 deletions(-) diff --git a/public/index.html b/public/index.html index 3295e600d..b4bc6fbec 100644 --- a/public/index.html +++ b/public/index.html @@ -1371,12 +1371,20 @@
-
+
-
+
+
+
+ + +

- World Info + World Selector ? @@ -1438,6 +1446,41 @@

+ +
+
+
+ +
+ +
+ +

+ World Info Editor + ? +

+
+ + + +
+ + +
+
+
+ +
+
+ +
+ + + + +
+ +

Soft Prompt

@@ -2065,41 +2108,7 @@
-
-
-
-
-
- -
- -

- World Info Editor - ? -

-
- - -
 
-
- - -
-
-
- -
-
- -
- - - - -
- -
@@ -2178,6 +2187,7 @@
+
diff --git a/public/script.js b/public/script.js index 7d15cd23c..90e5d221e 100644 --- a/public/script.js +++ b/public/script.js @@ -6220,6 +6220,7 @@ $(document).ready(function () { '#shadow_popup', '#world_popup', '.ui-widget', + '.text_pole', ]; for (const id of forbiddenTargets) { 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'); icon.toggleClass('down up'); icon.toggleClass('fa-circle-chevron-down fa-circle-chevron-up'); diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index a6e5d228a..952adedd7 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -30,11 +30,16 @@ import { import { sortByCssOrder } from "./utils.js"; var NavToggle = document.getElementById("nav-toggle"); + var RPanelPin = document.getElementById("rm_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 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 ConfirmationPopup = document.getElementById("dialogue_popup"); var AutoConnectCheckbox = document.getElementById("auto-connect-checkbox"); @@ -412,23 +417,18 @@ function OpenNavPanels() { if (LoadLocalBool("NavLockOn") == true && LoadLocalBool("NavOpened") == true) { //console.log("RA -- clicking right nav to open"); $("#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 - if (LoadLocalBool("LNavLockOn") == true && LoadLocalBool("LNavOpened") == true) { console.log("RA -- clicking left nav to open"); $("#leftNavDrawerIcon").click(); - } else { - /* console.log('didnt see reason to open left nav on load: L-Nav Locked? ' + - LoadLocalBool("LNavLockOn") - + ' L-nav was open before? ' + - LoadLocalBool("LNavOpened" == true)); */ + } + + //auto-open WI if locked and previously open + if (LoadLocalBool("WINavLockOn") == true && LoadLocalBool("WINavOpened") == 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("right-nav-panel")); 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).css("bottom", "unset"); $(elmnt).css("right", "unset"); + $(elmnt).css("margin", "unset"); /* console.log(` offsetLeft: ${elmnt.offsetLeft}, offsetTop: ${elmnt.offsetTop} @@ -615,7 +616,7 @@ $("document").ready(function () { if ($(RightNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) { $(RightNavPanel).slideToggle(200, "swing"); - $(rightNavDrawerIcon).toggleClass('openIcon closedIcon'); + //$(rightNavDrawerIcon).toggleClass('openIcon closedIcon'); $(RightNavPanel).toggleClass('openDrawer closedDrawer'); } } @@ -631,12 +632,30 @@ $("document").ready(function () { if ($(LeftNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) { $(LeftNavPanel).slideToggle(200, "swing"); - $(leftNavDrawerIcon).toggleClass('openIcon closedIcon'); + //$(leftNavDrawerIcon).toggleClass('openIcon closedIcon'); $(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 $(RPanelPin).prop('checked', LoadLocalBool("NavLockOn")); if (LoadLocalBool("NavLockOn") == true) { @@ -658,6 +677,18 @@ $("document").ready(function () { $(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 $("#rightNavDrawerIcon").on("click", function () { if (!$("#rightNavDrawerIcon").hasClass('openIcon')) { @@ -672,6 +703,13 @@ $("document").ready(function () { } 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; $('#send_textarea').focus(function () { chatbarInFocus = true; diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index e636893b9..128eba3ff 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -797,12 +797,12 @@ function resetMovablePanels() { document.getElementById("avatar_zoom_popup").style.height = ''; document.getElementById("avatar_zoom_popup").style.width = ''; - document.getElementById("world_popup").style.top = ''; - document.getElementById("world_popup").style.left = ''; - document.getElementById("world_popup").style.right = ''; - document.getElementById("world_popup").style.bottom = ''; - document.getElementById("world_popup").style.height = ''; - document.getElementById("world_popup").style.width = ''; + document.getElementById("WorldInfo").style.top = ''; + document.getElementById("WorldInfo").style.left = ''; + document.getElementById("WorldInfo").style.right = ''; + document.getElementById("WorldInfo").style.bottom = ''; + document.getElementById("WorldInfo").style.height = ''; + document.getElementById("WorldInfo").style.width = ''; } $(document).ready(() => { diff --git a/public/scripts/world-info.js b/public/scripts/world-info.js index 1ec51b112..7911cb5ed 100644 --- a/public/scripts/world-info.js +++ b/public/scripts/world-info.js @@ -311,7 +311,7 @@ function appendWorldEntry(entry) { const value = $(this).prop("checked"); world_info_data.entries[uid].disable = value; 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.siblings(".checkbox_fancy").click(function () { @@ -593,7 +593,8 @@ $(document).ready(() => { await loadWorldInfoData(); } - hideWorldEditor(); + if (selectedWorld === "None") { hideWorldEditor(); } + if (is_world_edit_open && selectedWorld !== "None") { showWorldEditor() }; saveSettingsDebounced(); }); diff --git a/public/style.css b/public/style.css index 9c9ac5f86..4e4fee3ec 100644 --- a/public/style.css +++ b/public/style.css @@ -911,19 +911,22 @@ input[type="file"] { #rm_button_characters, #rm_button_panel_pin_div, -#lm_button_panel_pin_div { +#lm_button_panel_pin_div, +#WI_button_panel_pin_div { font-size: 24px; display: inline; } #rm_button_panel_pin_div, -#lm_button_panel_pin_div { +#lm_button_panel_pin_div, +#WI_button_panel_pin_div { opacity: 0.5; transition: 0.3s; } #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; } @@ -932,32 +935,38 @@ input[type="file"] { } #rm_button_panel_pin, -#lm_button_panel_pin { +#lm_button_panel_pin, +#WI_panel_pin { display: none; } #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; } #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; } #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; } #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; } #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; } @@ -1670,20 +1679,20 @@ input[type=search]:focus::-webkit-search-cancel-button { #world_popup { display: none; - background-color: var(--SmartThemeBlurTintColor); - backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); - max-width: var(--sheldWidth); - max-height: calc(100% - 100px); + /* background-color: var(--SmartThemeBlurTintColor); + backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); */ + /* max-width: var(--sheldWidth); */ + /* max-height: calc(100% - 100px); */ min-height: 100px; min-width: 100px; - position: absolute; - margin-left: auto; - margin-right: auto; + /* position: absolute; */ + /* margin-left: auto; + margin-right: auto; */ left: 0; right: 0; - top: 40px; - box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); - padding: 10px; + /* top: 40px; */ + /* box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); */ + /* padding: 10px; */ flex-direction: column; z-index: 3010; border-radius: 0 0 20px 20px; @@ -1753,7 +1762,7 @@ input[type=search]:focus::-webkit-search-cancel-button { } #form_rename_world { - margin-right: 50px; + /* margin-right: 50px; */ } #form_rename_chat { @@ -3490,8 +3499,10 @@ label[for="extensions_autoconnect"] { } .fillRight, -.fillLeft { +.fillLeft, +#WorldInfo { min-width: unset; + position: fixed; } .fillLeft { @@ -3846,8 +3857,7 @@ body.movingUI .drag-grabber { body.movingUI #sheld, body.movingUI .drawer-content, body.movingUI #expression-holder, -body.movingUI #avatar_zoom_popup, -body.movingUI #world_popup { +body.movingUI #avatar_zoom_popup { resize: both; } @@ -4000,10 +4010,10 @@ body.waifuMode #avatar_zoom_popup { display: none; } - #world_popup_header { + /* #world_popup_header { flex-direction: column; align-items: flex-start; - } + } */ #world_popup_header .world_popup_expander { display: none; @@ -4049,14 +4059,18 @@ body.waifuMode #avatar_zoom_popup { #sheld, #character_popup, - #world_popup { - height: calc(100svh - 45px); + .drawer-content + + /* , + #world_popup */ + { + max-height: calc(100svh - 45px); width: 100% !important; margin: 0 auto; max-width: 100%; left: 0 !important; - resize: none; - top: 42px; + resize: none !important; + top: 40px; } #character_popup, @@ -4065,7 +4079,6 @@ body.waifuMode #avatar_zoom_popup { } #character_popup, - #world_popup, #send_form { border: 1px solid var(--grey30); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));