From d66542e88e5f2345948efbacb57cf83263dfae85 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Wed, 28 Jun 2023 20:40:29 +0900
Subject: [PATCH] fix: MovingUI breaking, typos, WI selector scroll

---
 public/index.html                  |  4 +-
 public/script.js                   | 12 ++--
 public/scripts/RossAscends-mods.js | 96 ++++++++++++++++++++----------
 public/scripts/power-user.js       | 50 +++++++++-------
 public/scripts/world-info.js       | 19 +++++-
 public/style.css                   |  5 +-
 6 files changed, 124 insertions(+), 62 deletions(-)

diff --git a/public/index.html b/public/index.html
index c94bcdbc9..fb5754c9e 100644
--- a/public/index.html
+++ b/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>
@@ -3455,4 +3455,4 @@
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/public/script.js b/public/script.js
index 0b8d68fe5..71bf545ae 100644
--- a/public/script.js
+++ b/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 lorebooks (direct link or id)<br>Example: <tt>Anonymous/example-character</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>lorebooks/bartleby/example-lorebook</tt></li>
             <li>More coming soon...</li>
         <ul>`
         const input = await callPopup(html, 'input');
diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js
index ab5bfaab3..6a0fa2509 100644
--- a/public/scripts/RossAscends-mods.js
+++ b/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);
-
-        /*         console.log(`
-                        height=${height}, 
-                        width=${width}, 
-                        top=${top}, 
-                        left=${left}`); */
+        right = parseInt(style.right);
+        bottom = parseInt(style.bottom);
 
         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;
-        power_user.movingUIState[elmntName].width = width;
-        power_user.movingUIState[elmntName].height = height;
-        power_user.movingUIState[elmntName].right = 'unset';
-        power_user.movingUIState[elmntName].bottom = 'unset';
-        power_user.movingUIState[elmntName].margin = 'unset';
+
+        if (!isNaN(oldWidth)
+            && !isNaN(oldHeight)
+            && (oldHeight !== height || oldWidth !== width)) {
+            power_user.movingUIState[elmntName].width = width;
+            power_user.movingUIState[elmntName].height = height;
+        } else {
+            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(() => {
-
-        if (isMobile() === false) {
-            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());
+        RA_checkOnlineStatus();
+    }, 100);
 
     // read the state of AutoConnect and AutoLoadChat.
     $(AutoConnectCheckbox).prop("checked", LoadLocalBool("AutoConnectEnabled"));
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 3d4aa6f39..f99f746fb 100644
--- a/public/scripts/power-user.js
+++ b/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();
diff --git a/public/scripts/world-info.js b/public/scripts/world-info.js
index c292127e8..90218cd17 100644
--- a/public/scripts/world-info.js
+++ b/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);
+    });
+
+})
diff --git a/public/style.css b/public/style.css
index 1842738a1..37985cc40 100644
--- a/public/style.css
+++ b/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;
@@ -4925,4 +4926,4 @@ body.waifuMode .zoomed_avatar {
     background-color: var(--SmartThemeBlurTintColor);
     text-align: center;
     line-height: 14px;
-}
+}
\ No newline at end of file