Added Module Settings Experiment

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;
+}

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"
+}

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;
+    },
+  },
+};