mousehunt-improved 0.97.1

package/src/utils/settings-markup.js

@@ -0,0 +1,907 @@
+import { createPopup, makeElement, makeMhButton } from './elements';
+import { doEvent, onEvent } from './event-registry';
+import { getSetting, getSettingDirect, saveSettingDirect } from './settings';
+import { getCurrentPage } from './page-current';
+import { getCurrentTab } from './page';
+import { getFlag } from './flags';
+import { onNavigation } from './events';
+import { setMultipleTimeout } from './utils';
+import { showSuccessMessage } from './messages';
+
+/**
+ * Save a setting and toggle the class in the settings UI.
+ *
+ * @param {Node}    node       The setting node to animate.
+ * @param {string}  key        The setting key.
+ * @param {boolean} value      The setting value.
+ * @param {string}  identifier The identifier for the settings.
+ */
+const saveSettingDirectAndToggleClass = (node, key, value, identifier = 'mh-utils-settings') => {
+  node.parentNode.parentNode.classList.add('busy');
+
+  // Save the setting.
+  saveSettingDirect(key, value, identifier);
+
+  doEvent('mh-improved-settings-changed', {
+    key,
+    value,
+    tab: identifier,
+    type: 'toggle',
+  });
+
+  doEvent(`mh-improved-settings-changed-${key}`, value);
+
+  // Add the completed class & remove it in a second.
+  node.parentNode.parentNode.classList.remove('busy');
+  node.parentNode.parentNode.classList.add('completed');
+  setTimeout(() => node.parentNode.parentNode.classList.remove('completed'), 1000);
+};
+
+/**
+ * Make the settings tab.
+ *
+ * @param {string} identifier The identifier for the settings.
+ * @param {string} name       The name of the settings tab.
+ *
+ * @return {string} The identifier.
+ */
+const addSettingsTab = (identifier = 'mousehunt-improved-settings', name = 'MH Improved') => {
+  addSettingsTabOnce(identifier, name);
+  onNavigation(() => addSettingsTabOnce(identifier, name), {
+    page: 'preferences',
+  });
+
+  return identifier;
+};
+
+/**
+ * Make the settings tab once.
+ *
+ * @ignore
+ *
+ * @param {string} identifier The identifier for the settings.
+ * @param {string} name       The name of the settings tab.
+ */
+const addSettingsTabOnce = (identifier = 'mousehunt-improved-settings', name = 'MH Improved') => {
+  if ('preferences' !== getCurrentPage()) {
+    return;
+  }
+
+  const existingSettings = document.querySelector(`#${identifier}`);
+  if (existingSettings) {
+    return;
+  }
+
+  const tabsContainer = document.querySelector('.mousehuntHud-page-tabHeader-container');
+  if (! tabsContainer) {
+    return;
+  }
+
+  const tabsContentContainer = document.querySelector('.mousehuntHud-page-tabContentContainer');
+  if (! tabsContentContainer) {
+    return;
+  }
+
+  // make sure the identifier is unique and safe to use as a class.
+  identifier = identifier.replaceAll(/[^\w-]/gi, '');
+
+  const settingsTab = document.createElement('a');
+  settingsTab.id = identifier;
+  settingsTab.href = '#';
+  settingsTab.classList.add('mousehuntHud-page-tabHeader', identifier);
+  settingsTab.setAttribute('data-tab', identifier);
+  settingsTab.setAttribute('onclick', 'hg.utils.PageUtil.onclickPageTabHandler(this); return false;');
+
+  const settingsTabText = document.createElement('span');
+  settingsTabText.innerText = name;
+
+  settingsTab.append(settingsTabText);
+  tabsContainer.append(settingsTab);
+
+  const settingsTabContent = document.createElement('div');
+  settingsTabContent.classList.add('mousehuntHud-page-tabContent', 'game_settings', identifier);
+  settingsTabContent.setAttribute('data-tab', identifier);
+
+  tabsContentContainer.append(settingsTabContent);
+
+  if (identifier === getCurrentTab()) {
+    const tab = document.querySelector(`#${identifier}`);
+    if (tab) {
+      tab.click();
+    }
+  }
+};
+
+/**
+ * Add a setting to the preferences page, both on page load and when the page changes.
+ *
+ * @see addSettingOnce
+ *
+ * @param {Object}  options             The options for the setting.
+ * @param {string}  options.name        The name of the setting.
+ * @param {string}  options.id          The setting id.
+ * @param {boolean} options.default     The default value.
+ * @param {string}  options.description The description of the setting.
+ * @param {Object}  options.module      The module the setting is for.
+ * @param {Object}  options.subSettings The sub-settings for the setting.
+ * @param {string}  options.group       The group the setting is in.
+ * @param {string}  options.tab         The tab to add the settings to.
+ * @param {Object}  options.settings    The settings for the setting.
+ *
+ * @return {Object} The setting.
+ */
+const addSetting = (options) => {
+  onNavigation(() => addSettingOnce(options), {
+    page: 'preferences',
+  });
+  return addSettingOnce(options);
+};
+
+/**
+ * Make a toggle for the setting.
+ *
+ * @param {string}  toggleKey          The toggle key.
+ * @param {boolean} toggleDefaultValue The toggle default value.
+ * @param {string}  toggleTab          The toggle tab.
+ * @param {boolean} settingRow         Whether or not the setting is a row.
+ *
+ * @return {Object} The toggle.
+ */
+const makeToggle = (toggleKey, toggleDefaultValue, toggleTab, settingRow = false) => {
+  const settingRowInputCheckbox = makeElement('div', 'mousehuntSettingSlider');
+
+  // Depending on the current state of the setting, add the active class.
+  const currentSetting = getSettingDirect(toggleKey, null, toggleTab);
+  if (currentSetting) {
+    settingRowInputCheckbox.classList.add('active');
+
+    if (settingRow) {
+      settingRow.classList.add('active');
+    }
+  } else if (null === currentSetting && toggleDefaultValue) {
+    settingRowInputCheckbox.classList.add('active');
+
+    if (settingRow) {
+      settingRow.classList.add('active');
+    }
+  }
+
+  /**
+   * Event listener for when the setting is clicked.
+   *
+   * @param {Event} event The event.
+   */
+  settingRowInputCheckbox.onclick = (event) => {
+    const isSettingActive = event.target.classList.contains('active');
+    event.target.classList.toggle('active');
+
+    if (settingRow) {
+      settingRow.classList.toggle('active');
+    }
+
+    saveSettingDirectAndToggleClass(event.target, toggleKey, ! isSettingActive, toggleTab);
+  };
+
+  // Add the input to the settings row.
+  return settingRowInputCheckbox;
+};
+
+/**
+ * Helper function to make a toggle on the settings page.
+ *
+ * @param {Object} options              The options for the toggle.
+ * @param {string} options.key          The setting key.
+ * @param {string} options.tab          The tab to add the settings to.
+ * @param {string} options.defaultValue The default value.
+ * @param {Object} options.settings     The settings for the settings.
+ *
+ * @return {Object} The toggle.
+ */
+const makeSettingToggle = ({ key, defaultValue, tab, settings }) => {
+  const settingRowInput = makeElement('div', 'settingRow-action-inputContainer');
+
+  const settingRowInputCheckbox = makeToggle(key, defaultValue, tab, settings);
+
+  settingRowInput.append(settingRowInputCheckbox);
+
+  return settingRowInput;
+};
+
+/**
+ * Helper function to make a select on the settings page.
+ *
+ * @param {Object} options                 The options for the select.
+ * @param {string} options.key             The setting key.
+ * @param {string} options.tab             The tab to add the settings to.
+ * @param {string} options.defaultValue    The default value.
+ * @param {Object} options.settingSettings The settings for the settings.
+ *
+ * @return {Object} The select.
+ */
+const makeSettingRowSelect = ({ key, tab, defaultValue, settingSettings }) => {
+  const settingRowInputWrapper = makeElement('div', 'settingRow-action-inputContainer');
+
+  const settingRowInput = makeElement('div', 'settingRow-action-inputContainer');
+
+  const settingRowInputDropdown = document.createElement('div');
+  settingRowInputDropdown.classList.add('inputBoxContainer');
+
+  if (settingSettings.type === 'multi-select') {
+    settingRowInputDropdown.classList.add('multiSelect');
+    settingRowInput.classList.add('multiSelect', 'select');
+  }
+
+  let amount = 1;
+  if (settingSettings.type === 'multi-select' && settingSettings.number) {
+    amount = settingSettings.number;
+  }
+
+  /**
+   * Make an option for the dropdown.
+   *
+   * @param {Object}  option         The option to make.
+   * @param {boolean} foundSelected  Whether or not the option is selected.
+   * @param {string}  currentSetting The current setting.
+   * @param {Object}  dValue         The default value.
+   * @param {number}  i              The index of the option.
+   *
+   * @return {Object} The option and whether or not it's selected.
+   */
+  const makeOption = (option, foundSelected, currentSetting, dValue, i) => {
+    if (option.seperator) {
+      return {
+        settingRowInputDropdownSelectOption: makeElement('hr'),
+        foundSelected,
+      };
+    }
+
+    const settingRowInputDropdownSelectOption = document.createElement('option');
+    settingRowInputDropdownSelectOption.value = option.value;
+    settingRowInputDropdownSelectOption.textContent = option.name;
+    settingRowInputDropdownSelectOption.disabled = option.disabled || false;
+
+    if (currentSetting && currentSetting === option.value) {
+      settingRowInputDropdownSelectOption.selected = true;
+      foundSelected = true;
+    } else if (! foundSelected && dValue && dValue[i] && dValue[i].value === option.value) {
+      settingRowInputDropdownSelectOption.selected = true;
+      foundSelected = true;
+    }
+
+    return {
+      settingRowInputDropdownSelectOption,
+      foundSelected
+    };
+  };
+
+  // make a multi-select dropdown.
+  for (let i = 0; i < amount; i++) {
+    const settingRowInputDropdownSelect = document.createElement('select');
+    settingRowInputDropdownSelect.classList.add('inputBox');
+
+    if (settingSettings.type === 'multi-select') {
+      settingRowInputDropdownSelect.classList.add('multiSelect');
+    }
+
+    const currentSetting = getSetting(`${key}-${i}`, null, tab);
+    let foundSelected = false;
+
+    settingSettings.options.forEach((option) => {
+      // If the value is 'optgroup', then we want to make an optgroup and use the options inside of it.
+      if (option.value === 'group') {
+        const settingRowInputDropdownSelectOptgroup = document.createElement('optgroup');
+        settingRowInputDropdownSelectOptgroup.label = option.name;
+
+        option.options.forEach((optgroupOption) => {
+          const result = makeOption(optgroupOption, foundSelected, currentSetting, defaultValue, i);
+          foundSelected = result.foundSelected;
+          settingRowInputDropdownSelectOptgroup.append(result.settingRowInputDropdownSelectOption);
+        });
+
+        settingRowInputDropdownSelect.append(settingRowInputDropdownSelectOptgroup);
+      } else {
+        const result = makeOption(option, foundSelected, currentSetting, defaultValue, i);
+        foundSelected = result.foundSelected;
+        settingRowInputDropdownSelect.append(result.settingRowInputDropdownSelectOption);
+      }
+    });
+
+    settingRowInputDropdown.append(settingRowInputDropdownSelect);
+
+    let timeout = null;
+
+    /**
+     * Event listener for when the setting is clicked.
+     *
+     * @param {Event} event The event.
+     */
+    settingRowInputDropdownSelect.onchange = (event) => {
+      const parent = settingRowInputDropdownSelect.parentNode.parentNode.parentNode;
+      parent.classList.add('inputDropdownWrapper');
+      parent.classList.add('busy');
+
+      // save the setting.
+      saveSettingDirect(`${key}-${i}`, event.target.value, tab);
+
+      doEvent('mh-improved-settings-changed', {
+        key: `${key}-${i}`,
+        value: event.target.value,
+        tab,
+        type: 'multi-select',
+      });
+
+      parent.classList.remove('busy');
+      parent.classList.add('completed');
+
+      clearTimeout(timeout);
+      timeout = setTimeout(() => parent.classList.remove('completed'), 1000);
+    };
+
+    settingRowInput.append(settingRowInputDropdown);
+
+    settingRowInputWrapper.append(settingRowInput);
+  }
+
+  return settingRowInputWrapper;
+};
+
+/**
+ * Helper function to make an input on the settings page.
+ *
+ * @param {Object} options              The options for the input.
+ * @param {string} options.key          The setting key.
+ * @param {string} options.tab          The tab to add the settings to.
+ * @param {string} options.defaultValue The default value.
+ *
+ * @return {Object} The input.
+ */
+const makeSettingInput = ({ key, tab, defaultValue }) => {
+  const settingRowInput = makeElement('div', ['settingRow-action-inputContainer', 'inputText']);
+
+  const settingRowInputText = makeElement('input', 'inputBox');
+  settingRowInputText.value = getSettingDirect(key, defaultValue, tab);
+
+  const inputSaveButton = makeMhButton({
+    text: 'Save',
+    className: 'inputSaveButton',
+  });
+
+  let timeout = null;
+  inputSaveButton.addEventListener('click', (event) => {
+    const parent = event.target.parentNode.parentNode.parentNode;
+    parent.classList.add('inputDropdownWrapper');
+    parent.classList.add('inputTextWrapper');
+    parent.classList.add('busy');
+
+    parent.classList.remove('completed');
+
+    // save the setting.
+    saveSettingDirect(key, settingRowInputText.value, tab);
+
+    doEvent('mh-improved-settings-changed', {
+      key,
+      value: settingRowInputText.value,
+      tab,
+      type: 'input',
+    });
+
+    parent.classList.remove('busy');
+    parent.classList.add('completed');
+
+    clearTimeout(timeout);
+    timeout = setTimeout(() => parent.classList.remove('completed'), 1000);
+  });
+
+  settingRowInput.classList.add('inputText');
+
+  settingRowInput.append(settingRowInputText);
+  settingRowInput.append(inputSaveButton);
+
+  return settingRowInput;
+};
+
+/**
+ * Helper function to make a textarea on the settings page.
+ *
+ * @param {Object} options              The options for the textarea.
+ * @param {string} options.key          The setting key.
+ * @param {string} options.tab          The tab to add the settings to.
+ * @param {string} options.defaultValue The default value.
+ *
+ * @return {Object} The textarea.
+ */
+const makeSettingTextArea = ({ key, tab, defaultValue }) => {
+  const settingRowInput = makeElement('div', ['settingRow-action-inputContainer', 'textarea']);
+
+  const settingRowInputText = makeElement('textarea', 'inputBox');
+  settingRowInputText.value = getSetting(key, defaultValue);
+
+  const inputSaveButton = makeMhButton({
+    text: 'Save',
+    className: 'inputSaveButton',
+  });
+
+  // Event listener for when the setting is clicked.
+  let timeout = null;
+  inputSaveButton.addEventListener('click', (event) => {
+    const parent = event.target.parentNode.parentNode.parentNode;
+    parent.classList.add('inputDropdownWrapper');
+    parent.classList.add('inputTextWrapper');
+    parent.classList.remove('completed');
+    parent.classList.add('busy');
+
+    // save the setting.
+    saveSettingDirect(key, settingRowInputText.value, tab);
+
+    doEvent('mh-improved-settings-changed', {
+      key,
+      value: settingRowInputText.value,
+      tab,
+      type: 'textarea',
+    });
+
+    parent.classList.remove('busy');
+    parent.classList.add('completed');
+
+    clearTimeout(timeout);
+    timeout = setTimeout(() => parent.classList.remove('completed'), 1000);
+
+    addSettingRefreshReminder(key);
+  });
+
+  settingRowInput.append(settingRowInputText);
+  settingRowInput.append(inputSaveButton);
+
+  return settingRowInput;
+};
+
+/**
+ * Helper function to make a multi-toggle on the settings page.
+ *
+ * @param {Object} options                 The options for the multi-toggle.
+ * @param {string} options.key             The setting key.
+ * @param {string} options.tab             The tab to add the settings to.
+ * @param {Object} options.settingSettings The setting's settings.
+ *
+ * @return {Object} The multi-toggle.
+ */
+const makeSettingMultiToggle = ({ key, tab, settingSettings }) => {
+  const multiToggleWrapper = makeElement('div', 'multi-toggle');
+
+  const multiToggleRow = makeElement('div', ['PagePreferences__settingsList', 'multi-toggle-row']);
+
+  settingSettings.options.forEach((option) => {
+    const optionSettingRow = makeElement('div', 'PagePreferences__settingsList');
+
+    // Label.
+    const optionSettingRowLabel = makeElement('div', 'PagePreferences__settingLabel');
+    makeElement('div', 'PagePreferences__settingName', option.name, optionSettingRowLabel);
+    optionSettingRow.append(optionSettingRowLabel);
+
+    // Action.
+    const optionSettingRowAction = makeElement('div', 'PagePreferences__settingAction');
+    const optionSettingRowInput = makeElement('div', 'settingRow-action-inputContainer');
+
+    const settingRowInputCheckbox = makeToggle(`${key}-${option.id}`, option.value, tab);
+    optionSettingRowInput.append(settingRowInputCheckbox);
+    optionSettingRowAction.append(optionSettingRowInput);
+
+    optionSettingRow.append(optionSettingRowAction);
+
+    multiToggleRow.append(optionSettingRow);
+  });
+
+  multiToggleWrapper.append(multiToggleRow);
+
+  return multiToggleWrapper;
+};
+
+/**
+ * Helper function to make a blank setting on the settings page.
+ *
+ * @param {Object} options         The options for the blank setting.
+ * @param {Object} options.section The section settings.
+ * @param {string} options.key     The setting key.
+ *
+ * @return {Object} The blank setting.
+ */
+const makeSettingBlank = ({ section, key }) => {
+  const action = makeElement('div', ['blank', 'blankSetting'], '');
+  action.id = `${section.id}-${key}-blank`;
+
+  return action;
+};
+
+/**
+ * Add a setting to the preferences page.
+ *
+ * @ignore
+ *
+ * @param {Object}  options             The options for the setting.
+ * @param {string}  options.name        The name of the setting.
+ * @param {string}  options.id          The setting id.
+ * @param {boolean} options.default     The default value.
+ * @param {string}  options.description The description of the setting.
+ * @param {Object}  options.module      The module the setting is for.
+ * @param {Object}  options.subSettings The sub-settings for the setting.
+ * @param {string}  options.group       The group the setting is in.
+ * @param {string}  options.tab         The tab to add the settings to.
+ * @param {Object}  options.settings    The settings for the setting.
+ *
+ * @return {Object} The setting.
+ */
+const addSettingOnce = (options) => {
+  const name = options.name;
+  const key = options.id;
+  const defaultValue = options.default || null;
+  const description = options.description || '';
+  const tab = 'mousehunt-improved-settings';
+  const settingSettings = options.subSettings || null;
+  const moduleType = options.moduleType || null;
+
+  // Make sure we have the container for our settings.
+  let container = document.querySelector(`.mousehuntHud-page-tabContent.${tab}`);
+  const originalContainer = container;
+  if (! container) {
+    return false;
+  }
+
+  const section = {
+    id: options.module.id,
+    name: options.module.name || '',
+    description: options.module.description || '',
+    subSetting: options.module.subSetting || false,
+  };
+
+  let leftSide = container.querySelector('.PagePreferences__settingsLeft');
+  if (! leftSide) {
+    leftSide = makeElement('div', 'PagePreferences__settingsLeft');
+    container.append(leftSide);
+    container.classList.add('two-column');
+  }
+
+  let rightSide = container.querySelector('.PagePreferences__settingsRight');
+  if (! rightSide) {
+    rightSide = makeElement('div', 'PagePreferences__settingsRight');
+    container.append(rightSide);
+    container.classList.add('two-column');
+  }
+
+  if (moduleType && getSetting('experiments.new-settings-styles-columns', false)) {
+    switch (moduleType) {
+    case 'better':
+    case 'design':
+    case 'element-hiding':
+    case 'advanced':
+    case 'beta':
+      container = leftSide;
+      break;
+    case 'feature':
+    case 'location-hud':
+      container = rightSide;
+      break;
+    default:
+      container = originalContainer;
+      break;
+    }
+  }
+
+  section.id = `${tab}-${section.id.replaceAll(/[^\w-]/gi, '')}`;
+
+  // If we don't have our custom settings section, then create it.
+  let sectionExists = document.querySelector(`#${section.id}-wrapper`);
+  if (! sectionExists) {
+    const title = makeElement('div', 'PagePreferences__section');
+    title.id = section.id;
+
+    const titleSection = makeElement('div', 'PagePreferences__title');
+    makeElement('h3', 'PagePreferences__titleText', section.name, titleSection);
+    // makeElement('div', 'PagePreferences__separator', '', titleSection);
+
+    // Append it.
+    title.append(titleSection);
+    container.append(title);
+
+    if (section.description) {
+      const settingSubHeader = makeElement('h4', ['settings-subheader', 'mh-utils-settings-subheader'], section.description);
+      title.after(settingSubHeader);
+    }
+
+    // append a wrapper for the settings.
+    const sectionWrapper = makeElement('div', 'PagePreferences__sectionWrapper');
+    sectionWrapper.id = `${section.id}-wrapper`;
+    container.append(sectionWrapper);
+
+    title.append(sectionWrapper);
+
+    sectionExists = document.querySelector(`#${section.id}-wrapper`);
+  }
+
+  const keySafe = key.replaceAll('.', '-');
+
+  // If we already have a setting visible for our key, bail.
+  const settingExists = document.querySelector(`#${section.id}-${keySafe}`);
+  if (settingExists) {
+    return settingExists;
+  }
+
+  // Create the markup for the setting row.
+  const settings = makeElement('div', ['PagePreferences__settingsList']);
+  settings.id = `${section.id}-${keySafe}`;
+
+  if (section.subSetting) {
+    settings.classList.add('PagePreferences__subSetting');
+  } else {
+    settings.classList.add(`PagePreferences__settingsList-${keySafe}`, `PagePreferences__settingsList-${section.id}`);
+  }
+
+  if (settingSettings && settingSettings.type) {
+    settings.classList.add(`PagePreferences__settingsList-${settingSettings.type}`);
+  }
+
+  const settingRow = makeElement('div', 'PagePreferences__setting');
+
+  const settingRowLabel = makeElement('div', 'PagePreferences__settingLabel');
+  const settingName = makeElement('div', 'PagePreferences__settingName');
+
+  const settingNameText = makeElement('a', 'PagePreferences__settingNameText', name);
+  settingNameText.href = `#${section.id}-${keySafe}`;
+  settingNameText.setAttribute('data-setting', key);
+  settingNameText.setAttribute('data-tab', tab);
+  settingNameText.setAttribute('data-default', JSON.stringify(defaultValue));
+  settingName.append(settingNameText);
+
+  if (! section.subSetting) {
+    settingNameText.addEventListener('click', (event) => {
+      event.preventDefault();
+      navigator.clipboard.writeText(`${window.location.href}#${section.id}-${keySafe}`);
+
+      showSuccessMessage({
+        message: 'Copied link to clipboard',
+        append: settingNameText,
+        after: true,
+        classname: 'setting-link-copied',
+      });
+    });
+  }
+
+  const defaultSettingText = makeElement('div', 'PagePreferences__settingDefault');
+
+  if (settingSettings && (settingSettings.type === 'select' || settingSettings.type === 'multi-select')) {
+    defaultSettingText.textContent = defaultValue.map((item) => item.name).join(', ');
+  } else {
+    defaultSettingText.textContent = defaultValue ? 'Enabled' : 'Disabled';
+  }
+
+  defaultSettingText.textContent = `Default setting: ${defaultSettingText.textContent}`;
+
+  const settingDescription = makeElement('div', 'PagePreferences__settingDescription');
+  settingDescription.innerHTML = description;
+  if (description.trim() === '') {
+    settingDescription.classList.add('empty-description');
+  }
+
+  settingRowLabel.append(settingName);
+  settingRowLabel.append(defaultSettingText);
+  settingRowLabel.append(settingDescription);
+
+  const settingRowAction = makeElement('div', 'PagePreferences__settingAction');
+
+  if (settingSettings) {
+    if (settingSettings.type === 'select' || settingSettings.type === 'multi-select') {
+      settingRowAction.append(makeSettingRowSelect({ key, tab, defaultValue, settingSettings }));
+    } else if (settingSettings.type === 'input') {
+      settingRowAction.append(makeSettingInput({ key, tab, defaultValue }));
+    } else if (settingSettings.type === 'textarea') {
+      settingRowAction.append(makeSettingTextArea({ key, tab, defaultValue }));
+    } else if (settingSettings.type === 'multi-toggle') {
+      settingRowAction.append(makeSettingMultiToggle({ key, tab, settingSettings }));
+    } else if (settingSettings.type === 'blank') {
+      settingRowAction.append(makeSettingBlank({ section, key }));
+    } else {
+      settingRowAction.append(makeSettingToggle({ key, defaultValue, tab, settings }));
+    }
+  } else {
+    settingRowAction.append(makeSettingToggle({ key, defaultValue, tab, settings }));
+  }
+
+  settingRow.append(settingRowLabel);
+  settingRow.append(settingRowAction);
+
+  settings.append(settingRow);
+  sectionExists.append(settings);
+
+  doEvent('mh-improved-setting-added-to-page', {
+    name,
+    key,
+    defaultValue,
+    description,
+    section,
+    tab,
+    settings,
+  });
+
+  return settings;
+};
+
+let fadeInTimeout = null;
+let fadeOutTimeout = null;
+let removeTimeout = null;
+
+/**
+ * Add a refresh reminder to the settings page.
+ */
+const addSettingRefreshReminder = () => {
+  let refreshMessage = document.querySelector('#mh-utils-settings-refresh-message');
+  if (! refreshMessage) {
+    const newMessageEl = makeElement('div', ['mh-utils-settings-refresh-message', 'mh-ui-fade'], 'Settings updated! You may need to refresh the page for changes to take effect.');
+    newMessageEl.id = 'mh-utils-settings-refresh-message';
+
+    newMessageEl.addEventListener('click', () => {
+      window.location.reload();
+    });
+
+    const body = document.querySelector('body');
+    body.append(newMessageEl);
+
+    refreshMessage = document.querySelector('#mh-utils-settings-refresh-message');
+  }
+
+  clearTimeout(fadeInTimeout);
+  clearTimeout(fadeOutTimeout);
+  clearTimeout(removeTimeout);
+
+  fadeInTimeout = setTimeout(() => refreshMessage.classList.add('mh-ui-fade-in'), 250);
+  fadeOutTimeout = setTimeout(() => {
+    refreshMessage.classList.remove('mh-ui-fade-in');
+    refreshMessage.classList.add('mh-ui-fade-out');
+  }, 3000);
+  removeTimeout = setTimeout(() => refreshMessage.remove(), 5000);
+};
+
+onEvent('mh-improved-settings-changed', addSettingRefreshReminder);
+
+/**
+ * Add the settings for a module.
+ *
+ * @param {Object} module The module to add settings for.
+ */
+const addSettingForModule = async (module) => {
+  if (! module || ! Array.isArray(module.modules)) {
+    return;
+  }
+
+  for (const submodule of module.modules) {
+    let moduleSettingRow = null;
+    if (
+      ! submodule.alwaysLoad &&
+      ! submodule.beta &&
+      ! (submodule.hiddenUnlessEnabled && ! getSetting(submodule.id, false) && ! getFlag('show-deprecated-modules'))
+    ) {
+      moduleSettingRow = await addSetting({
+        moduleType: module.id,
+        name: submodule.name,
+        id: submodule.id,
+        group: submodule.group,
+        default: submodule.default,
+        description: submodule.description,
+        module,
+      });
+    }
+
+    if (submodule.settings) {
+      const subSettingsGroup = await submodule.settings(module);
+      if (! subSettingsGroup) {
+        continue;
+      }
+
+      for (const subSettings of subSettingsGroup) {
+        const subSettingRow = await addSetting({
+          moduleType: module.id,
+          name: subSettings.title,
+          id: subSettings.id,
+          group: submodule.group || false,
+          default: subSettings.default,
+          description: subSettings.description,
+          module: {
+            ...module,
+            subSetting: true,
+          },
+          subSettings: subSettings.settings,
+        });
+
+        if (moduleSettingRow && subSettingRow) {
+          moduleSettingRow.append(subSettingRow);
+        }
+      }
+    }
+
+    doEvent('mh-improved-settings-added', { module });
+  }
+};
+
+const doAddSettingPreview = ({ id, selector, inputSelector, items = [], preview = true, previewCallback = () => {}, itemPreviewCallback = null }) => {
+  const previewLink = document.querySelector(selector);
+  if (! previewLink) {
+    return;
+  }
+
+  const hasEventListener = previewLink.getAttribute('data-mh-improved-settings-preview');
+  if (hasEventListener) {
+    return;
+  }
+
+  previewLink.setAttribute('data-mh-improved-settings-preview', true);
+
+  previewLink.addEventListener('click', (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const hasItemPreview = !! itemPreviewCallback;
+
+    const content = items.map((gradient) => `
+      <div class="gradient ${id}${gradient?.id ? ` ${gradient.id}` : ''}${hasItemPreview ? ' custom-preview' : ''}"${gradient.css ? ` style="background: ${gradient.css}"` : ''}>
+        <div class="name">${gradient.name}</div>
+        ${hasItemPreview ? itemPreviewCallback(gradient) : ''}
+        <div class="controls">
+          ${preview ? `<div class="mousehuntActionButton lightBlue mh-improved-custom-bg-action-button" data-gradient="${gradient.id}" data-action="preview"><span>Preview</span></div>` : ''}
+          <div class="mousehuntActionButton mh-improved-custom-bg-action-button ${preview ? 'normal' : 'small'}" data-gradient="${gradient.id}" data-action="use"><span>Select</span></div>
+        </div>
+      </div>
+    `).join('');
+
+    const popup = createPopup({
+      title: '',
+      className: `mh-improved-custom-background-gradient-preview-popup mh-improved-custom-preview-popup-${id}`,
+      content: `<div class="mh-improved-custom-background-gradient-preview">${content}</div>`,
+      show: false,
+    });
+
+    popup.show();
+
+    document.querySelector('.mh-improved-custom-background-gradient-preview').addEventListener('click', (evt) => {
+      const action = evt.target.closest('.mh-improved-custom-bg-action-button');
+      if (! action) {
+        return;
+      }
+
+      evt.preventDefault();
+
+      const gradient = action.getAttribute('data-gradient');
+      const actionType = action.getAttribute('data-action');
+
+      if ('preview' === actionType) {
+        previewCallback(gradient);
+      } else if ('use' === actionType) {
+        const input = document.querySelector(inputSelector);
+        if (input) {
+          input.value = gradient;
+          input.dispatchEvent(new Event('change'));
+        }
+
+        popup.hide();
+      }
+    });
+  }, {}, true);
+};
+
+/**
+ * Add a preview link to show the background options.
+ *
+ * @param {Object}   options                 The options for the preview.
+ * @param {string}   options.id              The ID of the preview.
+ * @param {string}   options.selector        The selector for the preview link.
+ * @param {string}   options.inputSelector   The selector for the input.
+ * @param {boolean}  options.preview         Whether or not to show the preview button.
+ * @param {Function} options.previewCallback The callback function to run when previewing.
+ */
+const addSettingPreview = (options) => {
+  setMultipleTimeout(() => doAddSettingPreview(options), [10, 250, 500, 1000, 2000, 5000]);
+};
+
+export {
+  addSettingForModule,
+  addSetting,
+  addSettingsTab,
+  addSettingPreview
+};