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

Impervious MovingUI

Browse Source
This commit is contained in:
RossAscends
2023-07-04 23:00:10 +09:00
parent b20f371a42
commit 3426f80656
6 changed files with 169 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
public/script.js
View File

@@ -7864,8 +7864,8 @@ $(document).ready(function () {
const pinnedDrawerClicked = drawer.hasClass('pinnedOpen');
if (!drawerWasOpenAlready) { //to open the drawer
$('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, "swing", function () {
$(this).closest('.drawer-content').removeClass('resizing');
$('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, "swing", async function () {
await delay(50); $(this).closest('.drawer-content').removeClass('resizing');
});
$('.openIcon').toggleClass('closedIcon openIcon');
$('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
@@ -7878,16 +7878,17 @@ $(document).ready(function () {
duration: 200,
easing: "swing",
start: function () {
jQuery(this).css('display', 'flex');
jQuery(this).css('display', 'flex'); //flex needed to make charlist scroll
},
complete: function () {
complete: async function () {
await delay(50);
$(this).closest('.drawer-content').removeClass('resizing');
$("#rm_print_characters_block").trigger("scroll");
}
})
} else {
$(this).closest('.drawer').find('.drawer-content').addClass('resizing').slideToggle(200, "swing", function () {
$(this).closest('.drawer-content').removeClass('resizing');
$(this).closest('.drawer').find('.drawer-content').addClass('resizing').slideToggle(200, "swing", async function () {
await delay(50); $(this).closest('.drawer-content').removeClass('resizing');
});
}
@@ -7896,13 +7897,13 @@ $(document).ready(function () {
icon.toggleClass('closedIcon openIcon');
if (pinnedDrawerClicked) {
$(drawer).addClass('resizing').slideToggle(200, "swing", function () {
$(this).removeClass('resizing');
$(drawer).addClass('resizing').slideToggle(200, "swing", async function () {
await delay(50); $(this).removeClass('resizing');
});
}
else {
$('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, "swing", function () {
$(this).closest('.drawer-content').removeClass('resizing');
$('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, "swing", async function () {
await delay(50); $(this).closest('.drawer-content').removeClass('resizing');
});
}
@@ -7997,6 +7998,12 @@ $(document).ready(function () {
loadMovingUIState();
$(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'block');
dragElement(newElement)
$(`.zoomed_avatar[forChar="${charname}"] img`).on('dragstart', (e) => {
console.log('saw drag on avatar!');
e.preventDefault();
return false;
});
}
});

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

@@ -104,22 +104,6 @@ function waitForElement(querySelector, timeout) {
});
}
waitForElement("#expression-image", 10000).then(function () {
dragElement(document.getElementById("expression-holder"));
dragElement(document.getElementById("floatingPrompt"));
}).catch(() => {
console.log("expression holder not loaded yet");
});
waitForElement("#floatingPrompt", 10000).then(function () {
dragElement(document.getElementById("floatingPrompt"));
}).catch(() => {
console.log("floating prompt box not loaded yet");
});
// Device detection
export const deviceInfo = await getDeviceInfo();
@@ -474,37 +458,28 @@ function OpenNavPanels() {
// Make the DIV element draggable:
// SECOND UPDATE AIMING FOR MUTATIONS ONLY
// THIRD UPDATE, prevent resize window breaks and smartly handle saving
export function dragElement(elmnt) {
var hasBeenDraggedByUser = false;
var isMouseDown = false;
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
var height, width, top, left, right, bottom;
var height, width, top, left, right, bottom,
maxX, maxY, winHeight, winWidth,
topBarFirstX, topBarLastX, sheldWidth;
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(`${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);
});
$(elmnt).off('mousedown').on('mousedown', () => { isMouseDown = true })
} else {
elmnt.off('mousedown').on('mousedown', dragMouseDown);
}
@@ -521,52 +496,87 @@ B: ${$(elmnt).css('bottom')}
console.debug('aborting mutator')
return
}
const style = getComputedStyle(target);
//console.log(style.top, style.left)
//console.debug(left + width, winWidth, hasBeenDraggedByUser, isMouseDown)
const style = getComputedStyle(target); //use computed values because not all CSS are set by default
height = target.offsetHeight;
width = target.offsetWidth;
top = parseInt(style.top);
left = parseInt(style.left);
right = parseInt(style.right);
bottom = parseInt(style.bottom);
maxX = parseInt(width + left);
maxY = parseInt(height + top);
winWidth = window.innerWidth;
winHeight = window.innerHeight;
sheldWidth = parseInt($('html').css('--sheldWidth').slice(0, -2));
topBarFirstX = (winWidth - sheldWidth) / 2;
topBarLastX = topBarFirstX + sheldWidth;
//prepare an empty poweruser object for the item being altered if we don't have one already
if (!power_user.movingUIState[elmntName]) {
console.debug(`adding config property for ${elmntName}`)
power_user.movingUIState[elmntName] = {};
}
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;
} 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}
---`)
//only record position changes if caused by a user click-drag
if (hasBeenDraggedByUser && isMouseDown) {
power_user.movingUIState[elmntName].top = top;
power_user.movingUIState[elmntName].left = left;
power_user.movingUIState[elmntName].right = right;
power_user.movingUIState[elmntName].bottom = bottom;
power_user.movingUIState[elmntName].margin = 'unset';
} else {
console.debug('skipped unsetting margins')
//console.debug(oldTop, top, oldLeft, left)
}
saveSettingsDebounced();
//handle resizing
if (!hasBeenDraggedByUser && isMouseDown) {
console.log('saw resize, NOT header drag')
//set css to prevent weird resize behavior (does not save)
elmnt.css('left', left)
elmnt.css('top', top)
//prevent resizing offscreen
if (top + elmnt.height() >= winHeight) {
elmnt.css('height', winHeight - top - 1 + "px");
}
if (left + elmnt.width() >= winWidth) {
elmnt.css('width', winWidth - left - 1 + "px");
}
//prevent resizing into the top bar
if (top <= 40 && maxX > topBarFirstX) {
elmnt.css('width', width - 1 + "px");
}
//set a listener for mouseup to save new width/height
elmnt.off('mouseup').on('mouseup', () => {
console.debug(`Saving ${elmntName} Height/Width`)
power_user.movingUIState[elmntName].width = width;
power_user.movingUIState[elmntName].height = height;
saveSettingsDebounced();
})
}
//handle dragging hit detection
if (hasBeenDraggedByUser && isMouseDown) {
//prevent dragging offscreen
if (top <= 0) {
elmnt.css('top', '0px');
} else if (top + elmnt.height() >= winHeight) {
elmnt.css('top', winHeight - elmnt.height() + "px");
}
if (left <= 0) {
elmnt.css('left', '0px');
} else if (left + elmnt.width() >= winWidth) {
elmnt.css('left', winWidth - elmnt.width() + "px");
}
//prevent underlap with topbar div
if (top < 40 && (maxX > topBarFirstX && maxX < topBarLastX || left < topBarLastX && left > topBarFirstX)) {
console.log('saw topbar hit')
elmnt.css('top', '42px');
}
}
// Check if the element header exists and set the listener on the grabber
if (elmntHeader.length) {
@@ -584,6 +594,7 @@ B: ${oldBottom}>> ${bottom}
function dragMouseDown(e) {
if (e) {
hasBeenDraggedByUser = true;
e.preventDefault();
pos3 = e.clientX; //mouse X at click
pos4 = e.clientY; //mouse Y at click
@@ -593,76 +604,60 @@ B: ${oldBottom}>> ${bottom}
}
function elementDrag(e) {
$("body").css("overflow", "hidden");
if (!power_user.movingUIState[elmntName]) {
power_user.movingUIState[elmntName] = {};
}
let winWidth = window.innerWidth;
let winHeight = window.innerHeight;
let sheldWidth = parseInt($('html').css('--sheldWidth').slice(0, -2));
let topBarFirstX = (winWidth - sheldWidth) / 2;
let topBarLastX = topBarFirstX + sheldWidth;
let maxX = (width + left);
let maxY = (height + top);
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX; //X change amt
pos2 = pos4 - e.clientY; //Y change amt
pos1 = pos3 - e.clientX; //X change amt (-1 or 1)
pos2 = pos4 - e.clientY; //Y change amt (-1 or 1)
pos3 = e.clientX; //new mouse X
pos4 = e.clientY; //new mouse Y
elmnt.attr('data-dragged', 'true');
if (elmnt.offset().top < 40) {
if (maxX > topBarFirstX && maxX < topBarLastX) {
elmnt.css('top', '42px');
}
if (elmnt.offset().left < topBarLastX && elmnt.offset().left > topBarFirstX) {
elmnt.css('top', '42px');
}
}
if (elmnt.offset().top - pos2 <= 0) {
elmnt.css('top', '0px');
}
if (elmnt.offset().left - pos1 <= 0) {
elmnt.css('left', '0px');
}
if (maxX >= winWidth) {
elmnt.css('left', elmnt.offset().left - 10 + "px");
}
if (maxY >= winHeight) {
elmnt.css('top', elmnt.offset().top - 10 + "px");
if (elmnt.offset().top - pos2 <= 40) {
elmnt.css('top', '20px');
}
}
//first set css to computed values to avoid CSS NaN results from 'auto', etc
elmnt.css('left', (elmnt.offset().left) + "px");
elmnt.css("top", (elmnt.offset().top) + "px");
//then update element position styles to account for drag changes
elmnt.css('margin', 'unset');
elmnt.css('left', (elmnt.offset().left - pos1) + "px");
elmnt.css("top", (elmnt.offset().top - pos2) + "px");
elmnt.css('margin', 'unset');
elmnt.css("right", ((winWidth - maxX) + "px"));
elmnt.css("bottom", ((winHeight - maxY) + "px"));
/*
console.log(`
winWidth: ${winWidth}, winHeight: ${winHeight}
sheldWidth: ${sheldWidth}
X: ${$(elmnt).css('left')}
Y: ${$(elmnt).css('top')}
MaxX: ${maxX}, MaxY: ${maxY}
Topbar 1st X: ${((winWidth - sheldWidth) / 2)}
TopBar lastX: ${((winWidth - sheldWidth) / 2) + sheldWidth}
`);
*/
// Height/Width here are for visuals only, and are not saved to settings
// required because some divs do hot have a set width/height..
// and will defaults to shrink to min value of 100px set in CSS file
elmnt.css('height', height + "px")
elmnt.css('width', width + "px")
/* console.log(`
winWidth: ${winWidth}, winHeight: ${winHeight}
sheldWidth: ${sheldWidth}
X: ${$(elmnt).css('left')}
Y: ${$(elmnt).css('top')}
MaxX: ${maxX}, MaxY: ${maxY}
Topbar 1st X: ${((winWidth - sheldWidth) / 2)}
TopBar lastX: ${((winWidth - sheldWidth) / 2) + sheldWidth}
`); */
return
}
function closeDragElement() {
console.debug('drag finished')
hasBeenDraggedByUser = false;
isMouseDown = false;
$(document).off('mouseup', closeDragElement);
$(document).off('mousemove', elementDrag);
$("body").css("overflow", "");
// Clear the "data-dragged" attribute
elmnt.attr('data-dragged', 'false');
console.debug(`Saving ${elmntName} UI position`)
saveSettingsDebounced();
}
}
@@ -677,7 +672,6 @@ export async function initMovingUI() {
await delay(1000)
console.debug('loading AN draggable function')
dragElement($("#floatingPrompt"))
}
}

20
public/scripts/extensions/expressions/index.js
View File

@@ -1,7 +1,7 @@
import { callPopup, eventSource, event_types, getRequestHeaders, saveSettingsDebounced } from "../../../script.js";
import { dragElement, isMobile } from "../../RossAscends-mods.js";
import { getContext, getApiUrl, modules, extension_settings, ModuleWorkerWrapper, doExtrasFetch } from "../../extensions.js";
import { power_user } from "../../power-user.js";
import { loadMovingUIState, power_user } from "../../power-user.js";
import { onlyUnique, debounce, getCharaFilename } from "../../utils.js";
export { MODULE_NAME };
@@ -182,20 +182,20 @@ async function visualNovelUpdateLayers(container) {
const group = context.groups.find(x => x.id == context.groupId);
const recentMessages = context.chat.map(x => x.original_avatar).filter(x => x).reverse().filter(onlyUnique);
const filteredMembers = group.members.filter(x => !group.disabled_members.includes(x));
const layerIndices = filteredMembers.slice().sort((a, b) => {
const layerIndices = filteredMembers.slice().sort((a, b) => {
const aRecentIndex = recentMessages.indexOf(a);
const bRecentIndex = recentMessages.indexOf(b);
const aFilteredIndex = filteredMembers.indexOf(a);
const bFilteredIndex = filteredMembers.indexOf(b);
if (aRecentIndex !== -1 && bRecentIndex !== -1) {
return bRecentIndex - aRecentIndex;
return bRecentIndex - aRecentIndex;
} else if (aRecentIndex !== -1) {
return 1;
return 1;
} else if (bRecentIndex !== -1) {
return -1;
return -1;
} else {
return aFilteredIndex - bFilteredIndex;
return aFilteredIndex - bFilteredIndex;
}
});
@@ -566,7 +566,7 @@ function getListItem(item, imageSrc, textClass) {
<span class="expression_list_title ${textClass}">${item}</span>
<img class="expression_list_image" src="${imageSrc}" />
</div>
`;
`;
}
async function getSpritesList(name) {
@@ -905,6 +905,7 @@ function setExpressionOverrideHtml(forceClear = false) {
</div>
</div>`;
$('body').append(html);
loadMovingUIState();
}
function addVisualNovelMode() {
const html = `
@@ -959,6 +960,10 @@ function setExpressionOverrideHtml(forceClear = false) {
$('#expression_upload_pack_button').on('click', onClickExpressionUploadPackButton);
$('#expressions_show_default').prop('checked', extension_settings.expressions.showDefault).trigger('input');
$('#expression_override_cleanup_button').on('click', onClickExpressionOverrideRemoveAllButton);
$(document).on('dragstart', '.expression', (e) => {
e.preventDefault()
return false
})
$(document).on('click', '.expression_list_item', onClickExpressionImage);
$(document).on('click', '.expression_list_upload', onClickExpressionUpload);
$(document).on('click', '.expression_list_delete', onClickExpressionDelete);
@@ -973,6 +978,7 @@ function setExpressionOverrideHtml(forceClear = false) {
const updateFunction = wrapper.update.bind(wrapper);
setInterval(updateFunction, UPDATE_INTERVAL);
moduleWorker();
dragElement($("#expression-holder"))
eventSource.on(event_types.CHAT_CHANGED, () => {
setExpressionOverrideHtml();

19
public/scripts/extensions/expressions/style.css
View File

@@ -31,6 +31,21 @@
object-fit: cover;
}*/
/* .expression-holder {
min-width: 100px;
min-height: 100px;
max-height: 90vh;
max-width: 90vh;
width: calc((100vw - var(--sheldWidth)) /2);
position: absolute;
padding: 0;
filter: drop-shadow(2px 2px 2px #51515199);
z-index: 29;
overflow: hidden;
display: none;
bottom: 0;
} */
.expression-holder {
min-width: 100px;
min-height: 100px;
@@ -38,7 +53,7 @@
max-width: 90vh;
width: calc((100vw - var(--sheldWidth)) /2);
position: absolute;
bottom: 1px;
bottom: 0;
padding: 0;
filter: drop-shadow(2px 2px 2px #51515199);
z-index: 2;
@@ -166,4 +181,4 @@ img.expression.default {
div.expression {
display: none;
}
}
}

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

@@ -975,7 +975,7 @@ async function saveTheme() {
}
}
function resetMovablePanels() {
async function resetMovablePanels() {
const panelIds = [
'sheld',
'left-nav-panel',
@@ -991,25 +991,32 @@ function resetMovablePanels() {
const panel = document.getElementById(id);
if (panel) {
$(panel).addClass('resizing');
panelStyles.forEach((style) => {
panel.style[style] = '';
});
}
});
const zoomedAvatar = document.querySelector('.zoomed_avatar');
if (zoomedAvatar) {
panelStyles.forEach((style) => {
zoomedAvatar.style[style] = '';
const zoomedAvatars = document.querySelectorAll('.zoomed_avatar');
if (zoomedAvatars.length > 0) {
zoomedAvatars.forEach((avatar) => {
avatar.classList.add('resizing');
panelStyles.forEach((style) => {
avatar.style[style] = '';
});
});
}
$('[data-dragged="true"]').removeAttr('data-dragged');
await delay(50)
power_user.movingUIState = {};
saveSettingsDebounced();
eventSource.emit(event_types.MOVABLE_PANELS_RESET);
eventSource.once(event_types.SETTINGS_UPDATED, () => {
$(".resizing").removeClass('resizing');
toastr.success('Panel positions reset');
});
@@ -1186,7 +1193,7 @@ $(document).ready(() => {
reloadMarkdownProcessor(power_user.render_formulas);
});
$("#start_reply_with").on('input', function() {
$("#start_reply_with").on('input', function () {
power_user.user_prompt_bias = $(this).val();
saveSettingsDebounced();
});

6
public/style.css
View File

@@ -3925,11 +3925,13 @@ label[for="extensions_autoconnect"] {
z-index: 9999 !important;
}
/*to prevent draggables from being made too small to see*/
.fillRight,
.fillLeft,
#WorldInfo,
#floatingPrompt {
min-width: unset;
min-width: 100px !important;
min-height: 100px !important;
position: fixed;
}
@@ -5049,4 +5051,4 @@ body.waifuMode .zoomed_avatar {
background-color: var(--SmartThemeBlurTintColor);
text-align: center;
line-height: 14px;
}
}