Library for adding a user interface to manage settings for grundos.cafe userscripts
此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.gf.qytechs.cn/scripts/514423/1554918/GC%20-%20Universal%20Userscripts%20Settings.js
async function addTextInput(configuration) {
let {
categoryName,
settingName,
labelText,
labelTooltip = undefined,
currentSetting = undefined,
defaultSetting = '',
callbackFunction = undefined,
} = configuration;
const header = await _addCategoryHeader(categoryName);
if (currentSetting === undefined) {
currentSetting = await GM.getValue(settingName, defaultSetting);
}
const textInput = document.createElement('input');
textInput.type = 'text';
textInput.name = settingName;
textInput.value = currentSetting;
const label = _createLabel(labelText);
_formatLabel(label, labelTooltip);
_addBelowHeader(header, label);
const inputElement = _createInput(textInput);
label.insertAdjacentElement('afterend', inputElement);
if (callbackFunction) {
_addCallback(() => callbackFunction(settingName, textInput.value));
} else {
_addCallback(async () => await GM.setValue(settingName, textInput.value));
}
}
async function addNumberInput(configuration) {
let {
categoryName,
settingName,
labelText,
labelTooltip = undefined,
min = 0,
max = 100,
step = 1,
currentSetting = undefined,
defaultSetting = 0,
callbackFunction = undefined
} = configuration;
const header = await _addCategoryHeader(categoryName);
if (currentSetting === undefined) {
currentSetting = await GM.getValue(settingName, defaultSetting);
}
const numberInput = document.createElement('input');
numberInput.type = 'number';
numberInput.name = settingName;
numberInput.value = currentSetting;
numberInput.min = min;
numberInput.max = max;
numberInput.step = step;
const label = _createLabel(labelText);
_formatLabel(label, labelTooltip);
_addBelowHeader(header, label);
const inputElement = _createInput(numberInput);
label.insertAdjacentElement('afterend', inputElement);
if (callbackFunction) {
_addCallback(() => callbackFunction(settingName, numberInput.value));
} else {
_addCallback(async () => await GM.setValue(settingName, numberInput.value));
}
}
async function addCheckboxInput(configuration) {
let {
categoryName,
settingName,
labelText,
labelTooltip = undefined,
currentSetting = undefined,
defaultSetting = false,
callbackFunction = undefined
} = configuration;
const header = await _addCategoryHeader(categoryName);
if (currentSetting === undefined) {
currentSetting = await GM.getValue(settingName, defaultSetting);
}
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = settingName;
checkbox.checked = currentSetting;
const label = _createLabel(labelText);
_formatLabel(label, labelTooltip);
_addBelowHeader(header, label);
const inputElement = _createInput(checkbox);
label.insertAdjacentElement('afterend', inputElement);
if (callbackFunction) {
_addCallback(() => callbackFunction(settingName, checkbox.checked));
} else {
_addCallback(async () => await GM.setValue(settingName, checkbox.checked));
}
}
async function addDropdown(configuration) {
let {
categoryName,
settingName,
labelText,
labelTooltip = undefined,
options, // [{ value: 'value', text: 'text', ... }]
currentSetting = undefined,
defaultSetting = undefined,
callbackFunction = undefined
} = configuration;
const header = await _addCategoryHeader(categoryName);
if (currentSetting === undefined) {
currentSetting = await GM.getValue(settingName, defaultSetting);
}
const select = document.createElement('select');
select.name = settingName;
select.classList.add('form-control');
options.forEach(option => {
const optionElement = document.createElement('option');
optionElement.value = option.value;
optionElement.textContent = option.text;
if (option.value === currentSetting) {
optionElement.selected = true;
}
select.appendChild(optionElement);
});
const label = _createLabel(labelText);
_formatLabel(label, labelTooltip);
_addBelowHeader(header, label);
const inputElement = _createInput(select);
label.insertAdjacentElement('afterend', inputElement);
if (callbackFunction) {
_addCallback(() => callbackFunction(settingName, select.value));
} else {
_addCallback(async () => await GM.setValue(settingName, select.value));
}
}
function _formatLabel(label, labelTooltip) {
if (labelTooltip) {
const info = document.createElement('sup');
info.textContent = ' ⓘ';
label.appendChild(info);
const showTooltip = () => {
const tooltip = document.getElementById('universal-userscript-tooltip');
const hideTooltip = () => {
tooltip.style.display = 'None';
};
const closeButton = `<a href="#" id="tooltip-close" style="display: flex; justify-content: center; color: var(--link_color); margin-top: 0.5rem;">Close Tooltip</a>`;
tooltip.innerHTML = labelTooltip + closeButton;
tooltip.style.display = 'block';
tooltip.querySelector('#tooltip-close').addEventListener('click', (event) => {
event.preventDefault();
hideTooltip();
});
};
label.addEventListener('click', (event) => {
showTooltip(event);
});
}
const colon = document.createTextNode('\u00A0:');
label.appendChild(colon);
}
function _addBelowHeader(header, label) {
let nextHeader = header.nextElementSibling;
while (nextHeader && !nextHeader.matches('.header')) {
nextHeader = nextHeader.nextElementSibling;
}
if (!nextHeader) {
nextHeader = document.querySelector('#universal-userscript-preferences>.market_grid.profile.prefs.margin-auto>.footer.small-gap');
}
nextHeader.insertAdjacentElement('beforebegin', label);
}
function _addSettingsLink() {
const existingNav = document.querySelector('nav.center.margin-1');
if (existingNav) {
const newNav = document.createElement('nav');
newNav.classList.add('center', 'margin-1');
newNav.id = 'universal-userscript-navigation';
const newLink = document.createElement('a');
newLink.href = '/help/userscripts/';
newLink.textContent = 'Userscript Preferences';
newNav.appendChild(newLink);
existingNav.after(newNav);
} else {
console.error('Existing navigation element not found.');
}
}
function _createLabel(labelText) {
const labelContainer = document.createElement('div');
labelContainer.classList.add('data', 'left');
const label = document.createElement('span');
label.textContent = labelText;
labelContainer.appendChild(label);
return labelContainer;
}
function _createInput(input) {
const inputContainer = document.createElement('div');
inputContainer.classList.add('data', 'flex-column', 'right');
inputContainer.appendChild(input);
return inputContainer;
}
function _addCallback(callbackFunction) {
document.getElementById('universal-userscript-update').addEventListener('click', callbackFunction);
}
async function _addCategoryHeader(categoryName) {
if (!window.location.href.includes('/help/userscripts/')) throw Error('Attempted to add setting outside of settings page.');
await _checkSettingsSetup();
const settings = document.querySelector('.market_grid.profile.prefs.margin-auto');
const footer = document.querySelector('#universal-userscript-preferences>.market_grid.profile.prefs.margin-auto>.footer.small-gap');
if (!settings) {
console.error('Settings not found.');
return;
}
const headers = Array.from(settings.querySelectorAll('.header'));
let header = headers.find(header => header.textContent.trim() === categoryName);
if (!header) {
header = document.createElement('div');
header.classList.add('header');
header.innerHTML = `<strong>${categoryName}</strong>`;
const insertionPoint = headers.find(existingHeader => existingHeader.textContent.trim().localeCompare(categoryName) > 0);
if (insertionPoint) {
insertionPoint.insertAdjacentElement('beforebegin', header);
} else {
footer.insertAdjacentElement('beforebegin', header);
}
}
return header;
}
function _replaceBannerImage() {
const bannerImage = document.getElementById('top-header-image');
if (bannerImage) {
bannerImage.src = 'https://grundoscafe.b-cdn.net/misc/banners/userinfo.gif';
} else {
console.error('Banner image not found.');
}
}
function _setupUniversalSettings() {
const helpPages = /\/help\/(?:profile|siteprefs|sidebar|randomevents)\/|\/discord\//;
const settings = window.location.href.includes('/help/userscripts/');
const help = helpPages.test(window.location.href);
if (help) {
_addSettingsLink();
} else if (settings) {
document.title = `Grundo's Cafe - Userscript Preferences`;
_replaceBannerImage();
const element = document.querySelector('main');
if (element) {
element.id = 'universal-userscript-preferences';
element.innerHTML = `
<h1>Userscript Preferences</h1>
<nav class="center margin-1">
<a href="/help/profile/">Edit Profile</a> |
<a href="/help/siteprefs/">Site Preferences</a> |
<a href="/help/sidebar/">Edit Sidebar</a> |
<a href="/discord/">Discord</a> |
<a href="/help/randomevents/">Random Event Log</a>
</nav>
<nav class="center margin-1" id="universal-userscript-navigation"><a href="/help/userscripts/">Userscript Preferences</a></nav>
<p>Adjust settings for participating userscripts here.<br>Click on settings with an ⓘ for more details.</p>
<div id="universal-userscript-tooltip" style="display: none; background-color: var(--grid_odd); padding: 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; margin-bottom: 1rem; border: 1px solid var(--grid_head);"></div>
<div class="market_grid profile prefs margin-auto">
<div class="footer small-gap">
<input class="form-control half-width" type="submit" value="Update Preferences" id="universal-userscript-update">
</div>
</div>
`;
document.getElementById('universal-userscript-update').addEventListener('click', () => {
const button = document.getElementById('universal-userscript-update');
button.disabled = true;
const originalText = button.value;
button.value = 'Preferences Updated!';
setTimeout(() => {
button.disabled = false;
button.value = originalText;
}, 2000);
});
}
}
}
async function _checkSettingsSetup() {
return new Promise((resolve, reject) => {
const interval = setInterval(() => {
if (document.getElementById('universal-userscript-preferences') !== null) {
clearInterval(interval);
clearTimeout(timeout);
resolve(true);
}
}, 50);
const timeout = setTimeout(() => {
clearInterval(interval);
reject(new Error('Timeout: universal-userscript-preferences element not found within 10 seconds'));
}, 10000);
});
}
if (!document.getElementById('universal-userscript-navigation')) {
_setupUniversalSettings();
}