From a6e1249c1e27d05399ceeef9c2074bad7efa029b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=95=E3=82=BA=E3=82=AD?= Date: Tue, 2 Mar 2021 16:48:05 +0100 Subject: [PATCH] Added Module Settings Experiment --- settings-experiment/custom-settings.js | 57 +++++++++ settings-experiment/goosemodModule.json | 11 ++ settings-experiment/index.js | 154 ++++++++++++++++++++++++ 3 files changed, 222 insertions(+) create mode 100644 settings-experiment/custom-settings.js create mode 100644 settings-experiment/goosemodModule.json create mode 100644 settings-experiment/index.js diff --git a/settings-experiment/custom-settings.js b/settings-experiment/custom-settings.js new file mode 100644 index 0000000..3beffd0 --- /dev/null +++ b/settings-experiment/custom-settings.js @@ -0,0 +1,57 @@ +export function textInputField(text, subtext, placeholder, onApply, initialValue) { + let el = document.createElement('div'); + el.classList.add('marginBottom20-32qID7'); + + // Text field + let textEl = document.createElement('span'); + textEl.classList.add('titleDefault-a8-ZSr', 'title-31JmR4'); + textEl.style.float = 'left'; + textEl.innerHTML = text; + + let subtextEl = document.createElement('div'); + subtextEl.classList.add('colorStandard-2KCXvj', 'size14-e6ZScH', 'description-3_Ncsb', 'formText-3fs7AJ', 'note-1V3kyJ', 'modeDefault-3a2Ph1'); + subtextEl.innerHTML = subtext; + subtextEl.style.clear = 'both'; + + // Input field + let inputWrapEl = document.createElement('div'); + inputWrapEl.classList.add('inputWrapper-31_8H8', 'codeRedemptionInput-3JOJea'); + inputWrapEl.style.float = 'right'; + + let inputEl = document.createElement('input'); + inputEl.classList.add('inputDefault-_djjkz', 'input-cIJ7To'); + inputEl.placeholder = placeholder; + inputEl.type = 'text'; + inputEl.value = initialValue ? initialValue : ''; + + inputWrapEl.appendChild(inputEl); + + // Button field + let buttonEl = document.createElement('div'); + buttonEl.classList.add('button-38aScr', 'lookFilled-1Gx00P', 'colorBrand-3pXr91', 'sizeSmall-2cSMqn', 'grow-q77ONN'); + buttonEl.style.cursor = 'pointer'; + buttonEl.style.float = 'right'; + + buttonEl.onclick = () => { + onApply(inputEl.value); + }; + + let buttonContentEl = document.createElement('div'); + buttonContentEl.classList.add('contents-18-Yxp'); + buttonContentEl.textContent = 'Apply'; + + buttonEl.appendChild(buttonContentEl); + + // Divider + let dividerEl = document.createElement('div'); + dividerEl.classList.add('divider-3573oO', 'dividerDefault-3rvLe-'); + dividerEl.style.marginTop = subtext ? '20px' : '45px'; + + el.appendChild(textEl); + el.appendChild(buttonEl); + el.appendChild(inputWrapEl); + el.appendChild(subtextEl); + el.appendChild(dividerEl); + + return el; +} diff --git a/settings-experiment/goosemodModule.json b/settings-experiment/goosemodModule.json new file mode 100644 index 0000000..47a53df --- /dev/null +++ b/settings-experiment/goosemodModule.json @@ -0,0 +1,11 @@ +{ + "main": "index.js", + + "name": "Module Settings Experiment", + "description": "Experiments with module settings", + "tags": ["test"], + + "authors": ["186496078273708033"], + + "version": "1.0.0" +} diff --git a/settings-experiment/index.js b/settings-experiment/index.js new file mode 100644 index 0000000..cd6c5c0 --- /dev/null +++ b/settings-experiment/index.js @@ -0,0 +1,154 @@ +import { createItem, removeItem } from '@goosemod/settings'; +import showToast from '@goosemod/toast'; +import { version } from './goosemodModule.json'; +import { textInputField } from './custom-settings.js'; + +let settingsPage = "Settings Experiment"; +let settings; +let defaultSettings = { +}; + +export default { + goosemodHandlers: { + onImport: () => { + }, + + onLoadingFinished: () => { + createItem(settingsPage, [ + `(${version})`, + { + type: "header", + text: "Header text" + }, + { + type: "text", + text: "Text without subtext" + }, + { + type: "text", + text: "Text with subtext", + subtext: "Subtext goes there" + }, + { + type: "button", + text: "Simple button -> no divider", + onclick: () => { + showToast(`Simple button: button clicked`); + } + }, + { + type: "button", + text: "Simple button -> divider following", + onclick: () => { + showToast(`Simple button: button clicked`); + } + }, + { + type: "divider", + }, + { + type: "text-and-button", + text: "Button", + subtext: "Subtext goes there", + buttonText: "Button Text", + onclick: () => { + showToast(`Button: button clicked`); + } + }, + { + type: "text-and-danger-button", + text: "Button (danger)", + subtext: "Subtext goes there", + buttonText: "Button Text", + onclick: () => { + showToast(`Button (danger): button clicked`); + } + }, + { + type: "toggle", + text: "Simple toggle switch", + subtext: "Subtext goes there", + onToggle: value => { + showToast(`Simple toggle: ${value}`); + }, + isToggled: () => false + }, + { + type: "toggle-text-button", + text: "Toggle switch with button", + subtext: "Subtext goes there", + onToggle: value => { + showToast(`Toggle+Button: ${value}`); + }, + isToggled: () => false, + buttonText: "Button text", + onclick: () => { + showToast(`Toggle+Button: button clicked`); + } + }, + { + type: "toggle-text-danger-button", + text: "Toggle switch with danger button", + subtext: "Subtext goes there", + onToggle: value => { + showToast(`Toggle+Button (danger): ${value}`); + }, + isToggled: () => false, + buttonText: "Button (danger) text", + onclick: () => { + showToast(`Toggle+Button (danger): button clicked`); + } + }, + { + type: "text-and-color", + text: "Colour picker", + subtext: "Doesn't support alpha for now", + oninput: value => { + showToast(`Colour picker: ${value}`); + }, + initialValue: () => "#000000" + }, + { + type: "custom", + element: (() => { + let e = document.createElement("span"); + e.innerText = "Custom Element"; + return e; + })() + }, + { + type: "custom", + element: textInputField( + "Text Input", + "Prototype", + "Placeholder", + value => { + showToast(`Text Input: ${value}`); + } + ) + }, + { + type: "custom", + element: textInputField( + "Text Input", + "Prototype", + "Placeholder", + value => { + showToast(`Text Input: ${value}`); + }, + "Preset value" + ) + } + ]); + }, + + onRemove: () => { + removeItem(settingsPage); + }, + + getSettings: () => [settings], + loadSettings: ([_settings]) => { + settings = _settings || defaultSettings; + }, + }, +};