284 lines
10 KiB
JavaScript
284 lines
10 KiB
JavaScript
"use strict";
|
|
|
|
function select_model(model_name) {
|
|
let model_dropdown = gradioApp().querySelector('#eventtext1 textarea');
|
|
if (model_dropdown && model_name) {
|
|
let randomNumber = Math.floor(Math.random() * 1000);
|
|
let paddedNumber = String(randomNumber).padStart(3, '0');
|
|
model_dropdown.value = model_name + "." + paddedNumber;
|
|
updateInput(model_dropdown)
|
|
}
|
|
}
|
|
|
|
function updateCardSize(width, height) {
|
|
var styleSheet = document.styleSheets[0];
|
|
var dimensionsKeyframes = `width: ${width}em !important; height: ${height}em !important;`;
|
|
|
|
var fontSize = (width / 8) * 100;
|
|
var textKeyframes = `font-size: ${fontSize}% !important;`;
|
|
|
|
addOrUpdateRule(styleSheet, '.civmodelcard img', dimensionsKeyframes);
|
|
addOrUpdateRule(styleSheet, '.civmodelcard .video-bg', dimensionsKeyframes);
|
|
addOrUpdateRule(styleSheet, '.civmodelcard figcaption', textKeyframes);
|
|
}
|
|
|
|
function toggleNSFWContent(hideAndBlur) {
|
|
const sheet = document.styleSheets[0];
|
|
|
|
if (!hideAndBlur) {
|
|
addOrUpdateRule(sheet, '.civcardnsfw', 'display: none;');
|
|
addOrUpdateRule(sheet, '.civnsfw img', 'filter: blur(10px);');
|
|
}
|
|
else {
|
|
addOrUpdateRule(sheet, '.civcardnsfw', 'display: block;');
|
|
addOrUpdateRule(sheet, '.civnsfw img', 'filter: none;');
|
|
}
|
|
|
|
const dateSections = document.querySelectorAll('.date-section');
|
|
dateSections.forEach((section) => {
|
|
const cards = section.querySelectorAll('.civmodelcard');
|
|
const nsfwCards = section.querySelectorAll('.civmodelcard.civcardnsfw');
|
|
|
|
if (!hideAndBlur && cards.length === nsfwCards.length) {
|
|
section.style.display = 'none';
|
|
} else {
|
|
section.style.display = 'block';
|
|
}
|
|
});
|
|
}
|
|
|
|
function addOrUpdateRule(styleSheet, selector, newRules) {
|
|
for (let i = 0; i < styleSheet.cssRules.length; i++) {
|
|
let rule = styleSheet.cssRules[i];
|
|
if (rule.selectorText === selector) {
|
|
rule.style.cssText = newRules;
|
|
return;
|
|
}
|
|
}
|
|
styleSheet.insertRule(`${selector} { ${newRules} }`, styleSheet.cssRules.length);
|
|
}
|
|
|
|
function updateCard(modelNameWithSuffix) {
|
|
const lastDotIndex = modelNameWithSuffix.lastIndexOf('.');
|
|
const modelName = modelNameWithSuffix.slice(0, lastDotIndex);
|
|
const suffix = modelNameWithSuffix.slice(lastDotIndex + 1);
|
|
let additionalClassName = '';
|
|
switch(suffix) {
|
|
case 'None':
|
|
additionalClassName = '';
|
|
break;
|
|
case 'Old':
|
|
additionalClassName = 'civmodelcardoutdated';
|
|
break;
|
|
case 'New':
|
|
additionalClassName = 'civmodelcardinstalled';
|
|
break;
|
|
default:
|
|
console.error('Unknown suffix', suffix);
|
|
return;
|
|
}
|
|
const parentDiv = document.querySelector('.civmodellist');
|
|
if (parentDiv) {
|
|
const cards = parentDiv.querySelectorAll('.civmodelcard');
|
|
cards.forEach((card) => {
|
|
const onclickAttr = card.getAttribute('onclick');
|
|
if (onclickAttr && onclickAttr.includes(`select_model('${modelName}')`)) {
|
|
card.className = `civmodelcard ${additionalClassName}`;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
var handled = false;
|
|
|
|
// Check for the combination of "Enter" key along with Ctrl, Alt, or Meta (Cmd on Mac)
|
|
if (e.key !== undefined) {
|
|
if ((e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
|
|
} else if (e.keyCode !== undefined) {
|
|
if ((e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
|
|
}
|
|
|
|
if (handled) {
|
|
// Check if the extension's tab is the currently active tab
|
|
var currentTabContent = get_uiCurrentTabContent();
|
|
if (currentTabContent && currentTabContent.id === "tab_civitai_interface") {
|
|
|
|
// Find the refresh button within the current tab content and click it
|
|
var refreshButton = currentTabContent.querySelector('#refreshBtn');
|
|
if (!refreshButton) {
|
|
refreshButton = currentTabContent.querySelector('#refreshBtnL');
|
|
}
|
|
if (refreshButton) {
|
|
refreshButton.click();
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
});
|
|
|
|
function BackToTop() {
|
|
const c = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
|
|
if (c > 0) {
|
|
window.requestAnimationFrame(BackToTop);
|
|
document.body.scrollTop = c - c / 8;
|
|
document.documentElement.scrollTop = c - c / 8;
|
|
}
|
|
}
|
|
|
|
// Function to adjust alignment of Filter Accordion
|
|
function adjustFilterBoxAndButtons() {
|
|
const element = document.querySelector("#filterBox") || document.querySelector("#filterBoxL");
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
const childDiv = element.querySelector("div:nth-child(3)");
|
|
if (!childDiv) {
|
|
return;
|
|
}
|
|
|
|
if (window.innerWidth >= 1250) {
|
|
childDiv.style.marginLeft = "0px"; // Reset margin-left when width is >= 1250
|
|
element.style.justifyContent = "center";
|
|
} else if (window.innerWidth < 1250 && window.innerWidth > 915) {
|
|
const marginLeftValue = 1250 - window.innerWidth;
|
|
childDiv.style.marginLeft = `${marginLeftValue}px`;
|
|
element.style.justifyContent = "center";
|
|
} else if (window.innerWidth <= 915) {
|
|
childDiv.style.marginLeft = "0px"; // Reset margin-left when width is <= 915
|
|
element.style.justifyContent = "flex-start";
|
|
}
|
|
|
|
// Reference to the buttons and divs
|
|
const pageBtn1 = document.querySelector("#pageBtn1");
|
|
const pageBtn2 = document.querySelector("#pageBtn2");
|
|
const pageBox = document.querySelector("#pageBox");
|
|
const pageBoxMobile = document.querySelector("#pageBoxMobile");
|
|
|
|
// Move the buttons based solely on viewport width
|
|
if (window.innerWidth < 500) {
|
|
childDiv.style.width = "300px";
|
|
// Move the buttons to pageBoxMobile
|
|
if (pageBoxMobile) {
|
|
if (pageBtn1) {
|
|
pageBoxMobile.appendChild(pageBtn1);
|
|
}
|
|
if (pageBtn2) {
|
|
pageBoxMobile.appendChild(pageBtn2);
|
|
}
|
|
}
|
|
} else {
|
|
childDiv.style.width = "375px";
|
|
// Move the buttons back to pageBox
|
|
if (pageBox) {
|
|
// Ensure pageBtn1 is the first child
|
|
if (pageBtn1) {
|
|
pageBox.insertBefore(pageBtn1, pageBox.firstChild);
|
|
}
|
|
// Append pageBtn2 to ensure it's the last child
|
|
if (pageBtn2) {
|
|
pageBox.appendChild(pageBtn2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Calls the function above whenever the window is resized
|
|
window.addEventListener("resize", adjustFilterBoxAndButtons);
|
|
|
|
// Function to trigger refresh button with extra checks for page slider
|
|
function pressRefresh() {
|
|
setTimeout(() => {
|
|
// Check if the user is currently typing in the specified input
|
|
const input = document.querySelector("#pageSlider > div:nth-child(2) > div > input");
|
|
if (document.activeElement === input) {
|
|
// Attach an event listener to detect the 'Enter' key press
|
|
input.addEventListener('keydown', function(event) {
|
|
if (event.key === 'Enter' || event.keyCode === 13) {
|
|
// If 'Enter' key is detected, blur the input to make it inactive
|
|
input.blur();
|
|
}
|
|
});
|
|
|
|
// Attach an event listener to detect if the input gets blurred
|
|
input.addEventListener('blur', function() {
|
|
return; // If input is blurred (either by user or programmatically), return from the function
|
|
});
|
|
|
|
return; // Exit the function if the user is typing
|
|
}
|
|
|
|
let button = document.querySelector("#refreshBtn");
|
|
if (!button) {
|
|
button = document.querySelector("#refreshBtnL");
|
|
}
|
|
if (button) {
|
|
button.click();
|
|
} else {
|
|
console.error("Both buttons with IDs #refreshBtn and #refreshBtnL not found.");
|
|
}
|
|
}, 200); // Delay of 200 milliseconds
|
|
}
|
|
|
|
// Update SVG Icons based on dark theme or light theme
|
|
function updateSVGIcons() {
|
|
// Check if body has class "dark" and set appropriate SVG Icons
|
|
const isDark = document.body.classList.contains('dark');
|
|
const filterIconUrl = isDark ? "https://svgur.com/i/y93.svg" : "https://svgur.com/i/yBY.svg";
|
|
const searchIconUrl = isDark ? "https://svgur.com/i/y9S.svg" : "https://svgur.com/i/y8H.svg";
|
|
|
|
const element = document.querySelector("#filterBox") || document.querySelector("#filterBoxL");
|
|
const childDiv = element.querySelector("div:nth-child(3)");
|
|
|
|
if (childDiv) {
|
|
const boxShadowValue = isDark ? 'box-shadow: #ffffff 0px 0px 2px 0px; display: none;' : 'box-shadow: #000000 0px 0px 2px 0px; display: none;';
|
|
childDiv.style.cssText = boxShadowValue;
|
|
}
|
|
|
|
// Update filter SVG
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `
|
|
#filterBox > div:nth-child(2) > span:nth-child(2)::before,
|
|
#filterBoxL > div:nth-child(2) > span:nth-child(2)::before {
|
|
background: url('${filterIconUrl}') no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
// Update search SVG
|
|
const refreshBtn = document.querySelector("#refreshBtn");
|
|
const refreshBtnL = document.querySelector("#refreshBtnL");
|
|
let targetSearchElement;
|
|
|
|
if (refreshBtn && refreshBtn.firstChild) {
|
|
targetSearchElement = refreshBtn.firstChild;
|
|
} else if (refreshBtnL && refreshBtnL.firstChild) {
|
|
targetSearchElement = refreshBtnL.firstChild;
|
|
}
|
|
if (targetSearchElement) {
|
|
targetSearchElement.src = searchIconUrl;
|
|
}
|
|
}
|
|
|
|
function onPageLoad() {
|
|
// The tab element which exists if page is done loading
|
|
const targetButton = document.querySelector("#tab_civitai_interface");
|
|
|
|
// If the target tab doesn't exist yet, retry after 1 second
|
|
if (!targetButton) {
|
|
return;
|
|
}
|
|
|
|
// If the tab is found, clear the interval
|
|
clearInterval(intervalID);
|
|
|
|
updateSVGIcons();
|
|
pressRefresh();
|
|
adjustFilterBoxAndButtons();
|
|
}
|
|
|
|
// Start the observer on page load and retry every second until successful
|
|
let intervalID = setInterval(onPageLoad, 1000); |