World Selector&Editor Combined/Lockable/Swappable

public/index.html

@@ -1371,12 +1371,20 @@
 
         <div id="WI-SP-button" class="drawer">
             <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 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 class="drawer-content closedDrawer">
                 <div id="wi-holder">
                     <h3>
-                        World Info
+                        World Selector
                         <a href="/notes#worldinfo" class="notes-link" target="_blank">
                             <span class="note-link-span">?</span>
                         </a>
@@ -1438,6 +1446,41 @@
                             </label>
                         </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 id="softprompt_block">
                     <h4>Soft Prompt</h4>
@@ -2065,41 +2108,7 @@
         <div id="character_popup_ok" class="menu_button">Save</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="select_chat_popup">
             <div id="select_chat_import"> <!-- import chat popup header -->
@@ -2178,6 +2187,7 @@
         </div>
     </div>
 
+
     <div id="entry_edit_template" class="template_element">
         <div class="world_entry">
             <form class="world_entry_form">

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');

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;

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(() => {

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();
     });
 

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));