fix: MovingUI breaking, typos, WI selector scroll

public/index.html

@@ -2773,7 +2773,7 @@
                     <textarea id="creator_notes_textarea" name="creator_notes" placeholder="(Displays in the characters list. Describe the bot to the user, list the chat models it has been tested on, and any other useful tips)" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="20000"></textarea>
                 </div>
                 <div>
-                    <h4>Creators's Tags</h4>
+                    <h4>Creator's Tags</h4>
                     <textarea id="tags_textarea" name="tags" placeholder="(List of freeform comma-separated tags)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="2000"></textarea>
                 </div>
                 <div>

public/script.js

@@ -7697,7 +7697,7 @@ $(document).ready(function () {
         eventSource.emit(event_types.GENERATION_STOPPED);
     });
 
-    $('.drawer-toggle').click(function () {
+    $('.drawer-toggle').on('click', function () {
         var icon = $(this).find('.drawer-icon');
         var drawer = $(this).parent().find('.drawer-content');
         if (drawer.hasClass('resizing')) { return }
@@ -7734,7 +7734,7 @@ $(document).ready(function () {
             }
 
 
-        } else if (drawerWasOpenAlready) { //to close
+        } else if (drawerWasOpenAlready) { //to close manually
             icon.toggleClass('closedIcon openIcon');
 
             if (pinnedDrawerClicked) {
@@ -7780,7 +7780,9 @@ $(document).ready(function () {
             if (jQuery.find('.openDrawer').length !== 0) {
                 if (targetParentHasOpenDrawer === 0) {
                     //console.log($('.openDrawer').not('.pinnedOpen').length);
-                    $('.openDrawer').not('.pinnedOpen').slideToggle(200, "swing");
+                    $('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, "swing", function () {
+                        $(this).closest('.drawer-content').removeClass('resizing')
+                    });
                     $('.openIcon').toggleClass('closedIcon openIcon');
                     $('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
 
@@ -7974,8 +7976,8 @@ $(document).ready(function () {
         const html = `<h3>Enter the URL of the content to import</h3>
         Supported sources:<br>
         <ul class="justifyLeft">
-            <li>Chub characters (direct link or id)<br>Example: <tt>lorebooks/bartleby/example-lorebook</tt></li>
+            <li>Chub characters (direct link or id)<br>Example: <tt></tt>Anonymous/example-character</li>
-            <li>Chub lorebooks (direct link or id)<br>Example: <tt>Anonymous/example-character</tt></li>
+            <li>Chub lorebooks (direct link or id)<br>Example: <tt>lorebooks/bartleby/example-lorebook</tt></li>
             <li>More coming soon...</li>
         <ul>`
         const input = await callPopup(html, 'input');

public/scripts/RossAscends-mods.js

@@ -27,7 +27,7 @@ import {
     SECRET_KEYS,
     secret_state,
 } from "./secrets.js";
-import { sortByCssOrder, debounce } from "./utils.js";
+import { sortByCssOrder, debounce, delay } from "./utils.js";
 import { chat_completion_sources, oai_settings } from "./openai.js";
 
 var NavToggle = document.getElementById("nav-toggle");
@@ -479,13 +479,30 @@ function OpenNavPanels() {
 
 export function dragElement(elmnt) {
     var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-    var height, width, top, left;
+    var height, width, top, left, right, bottom;
+
+    var oldTop = Number((String($(elmnt).css('top')).replace('px', '')))
+    var oldLeft = Number((String($(elmnt).css('left')).replace('px', '')))
+    var oldWidth = Number((String($(elmnt).css('width')).replace('px', '')))
+    var oldHeight = Number((String($(elmnt).css('width')).replace('px', '')))
+    var oldRight = Number((String($(elmnt).css('right')).replace('px', '')))
+    var oldBottom = Number((String($(elmnt).css('bottom')).replace('px', '')))
     var elmntName = elmnt.attr('id');
-    console.debug(`init drag for ${elmntName}`)
+    console.debug(`${elmntName} init state: 
+T: ${$(elmnt).css('top')}
+L: ${$(elmnt).css('left')}
+W: ${$(elmnt).css('width')}
+H: ${$(elmnt).css('height')}
+R: ${$(elmnt).css('right')}
+B: ${$(elmnt).css('bottom')}
+---`);
+
+
     const elmntNameEscaped = $.escapeSelector(elmntName);
     const elmntHeader = $(`#${elmntNameEscaped}header`);
     if (elmntHeader.length) {
         elmntHeader.off('mousedown').on('mousedown', (e) => {
+
             dragMouseDown(e);
         });
     } else {
@@ -498,6 +515,7 @@ export function dragElement(elmnt) {
             || $(target).hasClass('resizing')
             || Number((String(target.height).replace('px', ''))) < 50
             || Number((String(target.width).replace('px', ''))) < 50
+            || power_user.movingUI === false
             || isMobile() === true
         ) {
             console.debug('aborting mutator')
@@ -510,12 +528,8 @@ export function dragElement(elmnt) {
         width = target.offsetWidth;
         top = parseInt(style.top);
         left = parseInt(style.left);
-
+        right = parseInt(style.right);
-        /*         console.log(`
+        bottom = parseInt(style.bottom);
-                        height=${height}, 
-                        width=${width}, 
-                        top=${top}, 
-                        left=${left}`); */
 
         if (!power_user.movingUIState[elmntName]) {
             console.debug(`adding config property for ${elmntName}`)
@@ -524,11 +538,32 @@ export function dragElement(elmnt) {
 
         power_user.movingUIState[elmntName].top = top;
         power_user.movingUIState[elmntName].left = left;
+
+        if (!isNaN(oldWidth)
+            && !isNaN(oldHeight)
+            && (oldHeight !== height || oldWidth !== width)) {
             power_user.movingUIState[elmntName].width = width;
             power_user.movingUIState[elmntName].height = height;
-        power_user.movingUIState[elmntName].right = 'unset';
+        } else {
-        power_user.movingUIState[elmntName].bottom = 'unset';
+            console.debug('skipping W/H setting')
+        }
+        power_user.movingUIState[elmntName].right = right;
+        power_user.movingUIState[elmntName].bottom = bottom;
+        if (!isNaN(oldTop) && !isNaN(oldLeft) && (oldTop !== top || oldLeft !== left)) {
+            console.debug('unsetting margin due to custom position')
+            console.debug(`${elmntName}:
+T: ${oldTop}>>${top}
+L: ${oldLeft}>> ${left}
+H: ${oldHeight} >> ${height}
+W: ${oldWidth}>> ${width}
+R: ${oldRight} >> ${right}
+B: ${oldBottom}>> ${bottom}
+---`)
             power_user.movingUIState[elmntName].margin = 'unset';
+        } else {
+            console.log('skipped unsetting margins')
+            console.log(oldTop, top, oldLeft, left)
+        }
         saveSettingsDebounced();
 
 
@@ -632,29 +667,28 @@ export function dragElement(elmnt) {
     }
 }
 
+export async function initMovingUI() {
+    if (isMobile() === false && power_user.movingUI === true) {
+        console.debug('START MOVING UI')
+        dragElement($("#sheld"));
+        dragElement($("#left-nav-panel"));
+        dragElement($("#right-nav-panel"));
+        dragElement($("#WorldInfo"));
+        await delay(1000)
+        console.debug('loading AN draggable function')
+        dragElement($("#floatingPrompt"))
+
+    }
+}
+
 // ---------------------------------------------------
 
 $("document").ready(function () {
 
     // initial status check
     setTimeout(() => {
-
+        RA_checkOnlineStatus();
-        if (isMobile() === false) {
+    }, 100);
-            console.debug('START MOVING UI')
-            dragElement($("#sheld"));
-            dragElement($("#left-nav-panel"));
-            dragElement($("#right-nav-panel"));
-            dragElement($("#WorldInfo"));
-            dragElement($("#floatingPrompt"));
-        }
-        RA_checkOnlineStatus
-    }
-        , 100);
-
-
-
-
-    //$('div').on('resize', saveMovingUIState());
 
     // read the state of AutoConnect and AutoLoadChat.
     $(AutoConnectCheckbox).prop("checked", LoadLocalBool("AutoConnectEnabled"));

public/scripts/power-user.js

@@ -18,7 +18,7 @@ import {
     replaceCurrentChat,
     setCharacterId
 } from "../script.js";
-import { favsToHotswap, isMobile } from "./RossAscends-mods.js";
+import { favsToHotswap, isMobile, initMovingUI } from "./RossAscends-mods.js";
 import {
     groups,
     selected_group,
@@ -310,7 +310,13 @@ function switchMovingUI() {
     const movingUI = localStorage.getItem(storage_keys.movingUI);
     power_user.movingUI = movingUI === null ? false : movingUI == "true";
     $("body").toggleClass("movingUI", power_user.movingUI);
-    scrollChatToBottom();
+    if (power_user.movingUI === true) {
+        initMovingUI()
+        if (power_user.movingUIState) {
+            loadMovingUIState();
+        }
+    };
+    //scrollChatToBottom();
 }
 
 function noShadows() {
@@ -649,7 +655,10 @@ function loadPowerUserSettings(settings, data) {
 }
 
 function loadMovingUIState() {
-    if (isMobile() === false && power_user.movingUIState) {
+    if (isMobile() === false
+        && power_user.movingUIState
+        && power_user.movingUI === true) {
+        console.debug('loading movingUI state')
         for (var elmntName of Object.keys(power_user.movingUIState)) {
             var elmntState = power_user.movingUIState[elmntName];
             try {
@@ -665,7 +674,7 @@ function loadMovingUIState() {
             }
         }
     } else {
-        console.debug('skipping movingUI state load for mobile')
+        console.debug('skipping movingUI state load')
         return
     }
 }
@@ -940,6 +949,22 @@ function resetMovablePanels() {
     document.getElementById("right-nav-panel").style.width = '';
     document.getElementById("right-nav-panel").style.margin = '';
 
+    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.getElementById("WorldInfo").style.margin = '';
+
+    document.getElementById("floatingPrompt").style.top = '';
+    document.getElementById("floatingPrompt").style.left = '';
+    document.getElementById("floatingPrompt").style.right = '';
+    document.getElementById("floatingPrompt").style.bottom = '';
+    document.getElementById("floatingPrompt").style.height = '';
+    document.getElementById("floatingPrompt").style.width = '';
+    document.getElementById("floatingPrompt").style.margin = '';
+
     if ($("#expression-holder")) {
         document.getElementById("expression-holder").style.top = '';
         document.getElementById("expression-holder").style.left = '';
@@ -960,23 +985,6 @@ function resetMovablePanels() {
         $(".zoomed_avatar").css('margin', '');
     }
 
-
-    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.getElementById("WorldInfo").style.margin = '';
-
-    document.getElementById("floatingPrompt").style.top = '';
-    document.getElementById("floatingPrompt").style.left = '';
-    document.getElementById("floatingPrompt").style.right = '';
-    document.getElementById("floatingPrompt").style.bottom = '';
-    document.getElementById("floatingPrompt").style.height = '';
-    document.getElementById("floatingPrompt").style.width = '';
-    document.getElementById("floatingPrompt").style.margin = '';
-
     $('*[data-dragged="true"]').removeAttr('data-dragged');
     power_user.movingUIState = {}
     saveSettingsDebounced();

public/scripts/world-info.js

@@ -1370,4 +1370,21 @@ jQuery(() => {
             }
         }
     });
+
+    $("#world_info").on('mousewheel', function (e) {
+        e.preventDefault();
+        if ($(this).is(':animated')) {
+            return; //dont force multiple scroll animations
+        }
+        var wheelDelta = e.originalEvent.wheelDelta.toFixed(0);
+        var DeltaPosNeg = (wheelDelta >= 0) ? 1 : -1; //determine if scrolling up or down
+        var containerHeight = $(this).height().toFixed(0);
+        var optionHeight = $(this).find('option').first().height().toFixed(0);
+        var visibleOptions = (containerHeight / optionHeight).toFixed(0); //how many options we can see
+        var pixelsToScroll = (optionHeight * visibleOptions * DeltaPosNeg).toFixed(0); //scroll a full container height
+        var scrollTop = ($(this).scrollTop() - pixelsToScroll).toFixed(0);
+
+        $(this).animate({ scrollTop: scrollTop }, 200);
     });
+
+})

public/style.css

@@ -3874,9 +3874,10 @@ label[for="extensions_autoconnect"] {
     max-height: calc(100svh - 70px);
     display: none;
     position: absolute;
+    top: 41px;
     left: 0;
     right: 0;
-    margin: 35px auto 0 auto;
+    margin: 0 auto;
     backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     z-index: 9999 !important;