☰

GC - Universal Userscripts Settings

Library for adding a user interface to manage settings for grundos.cafe userscripts

目前為 2024-10-29 提交的版本，檢視 最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/514423/1473491/GC%20-%20Universal%20Userscripts%20Settings.js 

  1. async function addTextInput(configuration) {
  2.     let {
  3.         categoryName,
  4.         settingName,
  5.         labelText,
  6.         lableTooltip = undefined,
  7.         currentSetting = undefined,
  8.         defaultSetting = '',
  9.         callbackFunction = undefined,
  10.     } = configuration;
  11.     
  12.     const header = await _addCategoryHeader(categoryName);
  13.     if (currentSetting === undefined) {
  14.         currentSetting = await GM.getValue(settingName, defaultSetting);
  15.     }
  16.  
  17.     const textInput = document.createElement('input');
  18.     textInput.type = 'text';
  19.     textInput.name = settingName;
  20.     textInput.value = currentSetting;
  21.     
  22.     const label = _createLabel(labelText);
  23.     _formatLabel(label, lableTooltip);
  24.     _addBelowHeader(header, label);
  25.  
  26.     const inputElement = _createInput(textInput);
  27.     label.insertAdjacentElement('afterend', inputElement);
  28.  
  29.     if (callbackFunction) {
  30.         _addCallback(() => callbackFunction(settingName, textInput.value));
  31.     } else {
  32.         _addCallback(async () => await GM.setValue(settingName, checkbox.checked));
  33.     }
  34. }
  35.  
  36. async function addNumberInput(configuration) {
  37.     let {
  38.         categoryName,
  39.         settingName,
  40.         labelText,
  41.         lableTooltip = undefined,
  42.         min = 0,
  43.         max = 100,
  44.         step = 1,
  45.         currentSetting = undefined,
  46.         defaultSetting = 0,
  47.         callbackFunction = undefined
  48.     } = configuration;
  49.  
  50.     const header = await _addCategoryHeader(categoryName);
  51.     if (currentSetting === undefined) {
  52.         currentSetting = await GM.getValue(settingName, defaultSetting);
  53.     }
  54.  
  55.     const numberInput = document.createElement('input');
  56.     numberInput.type = 'number';
  57.     numberInput.name = settingName;
  58.     numberInput.value = currentSetting;
  59.     numberInput.min = min;
  60.     numberInput.max = max;
  61.     numberInput.step = step;
  62.     
  63.     const label = _createLabel(labelText);
  64.     _formatLabel(label, lableTooltip);
  65.     _addBelowHeader(header, label);
  66.  
  67.     const inputElement = _createInput(numberInput);
  68.     label.insertAdjacentElement('afterend', inputElement);
  69.  
  70.     if (callbackFunction) {
  71.         _addCallback(() => callbackFunction(settingName, numberInput.value));
  72.     } else {
  73.         _addCallback(async () => await GM.setValue(settingName, checkbox.checked));
  74.     }
  75. }
  76.  
  77. async function addCheckboxInput(configuration) {
  78.     let {
  79.         categoryName,
  80.         settingName,
  81.         labelText,
  82.         lableTooltip = undefined,
  83.         currentSetting = undefined,
  84.         defaultSetting = false,
  85.         callbackFunction = undefined
  86.     } = configuration;
  87.         
  88.     const header = await _addCategoryHeader(categoryName);
  89.     if (currentSetting === undefined) {
  90.         currentSetting = await GM.getValue(settingName, defaultSetting);
  91.     }
  92.  
  93.     const checkbox = document.createElement('input');
  94.     checkbox.type = 'checkbox';
  95.     checkbox.name = settingName;
  96.     checkbox.checked = currentSetting;
  97.     
  98.     const label = _createLabel(labelText);
  99.     _formatLabel(label, lableTooltip);
  100.     _addBelowHeader(header, label);
  101.  
  102.     const inputElement = _createInput(checkbox);
  103.     label.insertAdjacentElement('afterend', inputElement);
  104.  
  105.     if (callbackFunction) {
  106.         _addCallback(() => callbackFunction(settingName, checkbox.checked));
  107.     } else {
  108.         _addCallback(async () => await GM.setValue(settingName, checkbox.checked));
  109.     }
  110. }
  111.  
  112. async function addDropdown(configuration) {
  113.     let {
  114.         categoryName,
  115.         settingName,
  116.         labelText,
  117.         lableTooltip = undefined,
  118.         options, // [{ value: 'value', text: 'text', ... }]
  119.         currentSetting = undefined,
  120.         defaultSetting = undefined,
  121.         callbackFunction = undefined
  122.     } = configuration;
  123.  
  124.     const header = await _addCategoryHeader(categoryName);
  125.     if (currentSetting === undefined) {
  126.         currentSetting = await GM.getValue(settingName, defaultSetting);
  127.     }
  128.  
  129.     const select = document.createElement('select');
  130.     select.name = settingName;
  131.     select.classList.add('form-control');
  132.  
  133.     options.forEach(option => {
  134.         const optionElement = document.createElement('option');
  135.         optionElement.value = option.value;
  136.         optionElement.textContent = option.text;
  137.         if (option.value === currentSetting) {
  138.             optionElement.selected = true;
  139.         }
  140.         select.appendChild(optionElement);
  141.     });
  142.     
  143.     const label = _createLabel(labelText);
  144.     _formatLabel(label, lableTooltip);
  145.     _addBelowHeader(header, label);
  146.  
  147.     const inputElement = _createInput(select);
  148.     label.insertAdjacentElement('afterend', inputElement);
  149.  
  150.     if (callbackFunction) {
  151.         _addCallback(() => callbackFunction(settingName, select.value));
  152.     } else {
  153.         _addCallback(async () => await GM.setValue(settingName, checkbox.checked));
  154.     }
  155. }
  156.  
  157. function _formatLabel(label, lableTooltip) {
  158.     if (lableTooltip) {
  159.         const info = document.createElement('sup');
  160.         info.textContent = ' ⓘ';
  161.         label.appendChild(info);
  162.  
  163.         const showTooltip = () => {
  164.             const tooltip = document.getElementById('universal-userscript-tooltip');
  165.             const hideTooltip = () => {
  166.                 tooltip.style.display = 'None';
  167.             };
  168.  
  169.             const closeButton = `<a href="#" id="tooltip-close" style="display: flex; justify-content: center; color: var(--link_color); margin-top: 0.5rem;">Close Tooltip</a>`;
  170.             tooltip.innerHTML = lableTooltip + closeButton;
  171.             tooltip.style.display = 'block';
  172.             
  173.             tooltip.querySelector('#tooltip-close').addEventListener('click', (event) => {
  174.                 event.preventDefault();
  175.                 hideTooltip();
  176.             });
  177.         };
  178.  
  179.         label.addEventListener('click', (event) => {
  180.             showTooltip(event);
  181.         });
  182.     }
  183.     const colon = document.createTextNode('\u00A0:');
  184.     label.appendChild(colon);
  185. }
  186.  
  187. function _addBelowHeader(header, label) {
  188.     let nextHeader = header.nextElementSibling;
  189.     while (nextHeader && !nextHeader.matches('.header')) {
  190.         nextHeader = nextHeader.nextElementSibling;
  191.     }
  192.     if (!nextHeader) {
  193.         nextHeader = document.querySelector('#universal-userscript-preferences>.market_grid.profile.prefs.margin-auto>.footer.small-gap');
  194.     }
  195.     nextHeader.insertAdjacentElement('beforebegin', label);
  196. }
  197.  
  198. function _addSettingsLink() {
  199.     const existingNav = document.querySelector('nav.center.margin-1');
  200.   
  201.     if (existingNav) {
  202.       const newNav = document.createElement('nav');
  203.       newNav.classList.add('center', 'margin-1');
  204.       newNav.id = 'universal-userscript-navigation';
  205.       
  206.       const newLink = document.createElement('a');
  207.       newLink.href = '/help/userscripts/';
  208.       newLink.textContent = 'Userscript Preferences';
  209.       
  210.       newNav.appendChild(newLink);
  211.       
  212.       existingNav.after(newNav);
  213.     } else {
  214.       console.error('Existing navigation element not found.');
  215.     }
  216. }
  217.  
  218. function _createLabel(labelText) {
  219.     const labelContainer = document.createElement('div');
  220.     labelContainer.classList.add('data', 'left');
  221.  
  222.     const label = document.createElement('span');
  223.     label.textContent = labelText;
  224.     labelContainer.appendChild(label);
  225.     return labelContainer;
  226. }
  227.  
  228. function _createInput(input) {
  229.     const inputContainer = document.createElement('div');
  230.     inputContainer.classList.add('data', 'flex-column', 'right');
  231.     inputContainer.appendChild(input);
  232.     return inputContainer;
  233. }
  234.  
  235. function _addCallback(callbackFunction) {
  236.     document.getElementById('universal-userscript-update').addEventListener('click', callbackFunction);
  237. }
  238.  
  239. async function _addCategoryHeader(categoryName) {
  240.     if (!window.location.href.includes('/help/userscripts/')) throw Error('Attempted to add setting outside of settings page.');
  241.     await _checkSettingsSetup();
  242.     const settings = document.querySelector('.market_grid.profile.prefs.margin-auto');
  243.     const footer = document.querySelector('#universal-userscript-preferences>.market_grid.profile.prefs.margin-auto>.footer.small-gap');
  244.     if (!settings) {
  245.         console.error('Settings not found.');
  246.         return;
  247.     }
  248.  
  249.     const headers = Array.from(settings.querySelectorAll('.header'));
  250.     let header = headers.find(header => header.textContent.trim() === categoryName);
  251.  
  252.     if (!header) {
  253.         header = document.createElement('div');
  254.         header.classList.add('header');
  255.         header.innerHTML = `<strong>${categoryName}</strong>`;
  256.     
  257.         const insertionPoint = headers.find(existingHeader => existingHeader.textContent.trim().localeCompare(categoryName) > 0);
  258.     
  259.         if (insertionPoint) {
  260.             insertionPoint.insertAdjacentElement('beforebegin', header);
  261.         } else {
  262.             footer.insertAdjacentElement('beforebegin', header);
  263.         }
  264.     }
  265.  
  266.     return header;
  267. }
  268.  
  269. function _replaceBannerImage() {
  270.     const bannerImage = document.getElementById('top-header-image');
  271.     if (bannerImage) {
  272.         bannerImage.src = 'https://grundoscafe.b-cdn.net/misc/banners/userinfo.gif';
  273.     } else {
  274.         console.error('Banner image not found.');
  275.     }
  276. }
  277.  
  278. function _setupUniversalSettings() {
  279.     const helpPages = /\/help\/(?:profile|siteprefs|sidebar|randomevents)\/|\/discord\//;
  280.     const settings = window.location.href.includes('/help/userscripts/');
  281.     const help = helpPages.test(window.location.href);
  282.     if (help) {
  283.         _addSettingsLink();
  284.     } else if (settings) {
  285.         _replaceBannerImage();
  286.         const element = document.querySelector('main');
  287.         if (element) {
  288.             element.id = 'universal-userscript-preferences';  
  289.             element.innerHTML = `
  290.                 <h1>Userscript Preferences</h1>
  291.                 <nav class="center margin-1">
  292.                     <a href="/help/profile/">Edit Profile</a> |
  293.                     <a href="/help/siteprefs/">Site Preferences</a> |
  294.                     <a href="/help/sidebar/">Edit Sidebar</a> |
  295.                     <a href="/discord/">Discord</a> |
  296.                     <a href="/help/randomevents/">Random Event Log</a>
  297.                 </nav>
  298.                 <nav class="center margin-1" id="universal-userscript-navigation"><a href="/help/userscripts/">Userscript Preferences</a></nav>
  299.                 <p>Here you can adjust settings for participating userscripts.</p>
  300.                 <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>
  301.                 <div class="market_grid profile prefs margin-auto">
  302.                     <div class="footer small-gap">
  303.                         <input class="form-control half-width" type="submit" value="Update Preferences" id="universal-userscript-update">
  304.                     </div>
  305.                 </div>
  306.                 `;
  307.             document.getElementById('universal-userscript-update').addEventListener('click', () => {
  308.                 const button = document.getElementById('universal-userscript-update');
  309.                 
  310.                 button.disabled = true;
  311.                 
  312.                 const originalText = button.value;
  313.                 button.value = 'Preferences Updated!';
  314.                 
  315.                 setTimeout(() => {
  316.                     button.disabled = false;
  317.                     button.value = originalText;
  318.                 }, 2000);
  319.             });
  320.         }
  321.     }
  322. }
  323.  
  324. async function _checkSettingsSetup() {
  325.     return new Promise((resolve, reject) => {
  326.         const interval = setInterval(() => {
  327.             if (document.getElementById('universal-userscript-preferences') !== null) {
  328.                 clearInterval(interval);
  329.                 clearTimeout(timeout);
  330.                 resolve(true);
  331.             }
  332.         }, 50);
  333.  
  334.         const timeout = setTimeout(() => {
  335.             clearInterval(interval);
  336.             reject(new Error('Timeout: universal-userscript-preferences element not found within 10 seconds'));
  337.         }, 10000);
  338.     });
  339. }
  340.  
  341. if (!document.getElementById('universal-userscript-navigation')) {
  342.     _setupUniversalSettings();
  343. }