rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: MovingUI breaking, typos, WI selector scroll

Browse Source
This commit is contained in:
RossAscends
2023-06-28 20:40:29 +09:00
parent 5084ae9f9a
commit d66542e88e
6 changed files with 124 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -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>

12
public/script.js
View File

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

90
public/scripts/RossAscends-mods.js
View File

@@ -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;
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';
power_user.movingUIState[elmntName].bottom = 'unset';
} 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"));

50
public/scripts/power-user.js
View File

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

19
public/scripts/world-info.js
View File

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

3
public/style.css
View File

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