Renamed ".utilities" folder to "utilities"

utilities/settings-page-builder/script.js

@@ -0,0 +1,237 @@
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+
+const settingsJson = urlParams.get("settingsJson") || "";
+
+document.addEventListener('DOMContentLoaded', () => {
+  const settingsContent = document.getElementById('settings-content');
+  const saveButton = document.getElementById('save-settings');
+
+  fetch(settingsJson)
+  //fetch('../multichat-overlay/settings/settings.json')
+    .then(response => response.json())
+    .then(data => {
+      const groupedSettings = {};
+
+      // Group settings by their 'group' property
+      data.settings.forEach(setting => {
+        if (!groupedSettings[setting.group]) {
+          groupedSettings[setting.group] = [];
+        }
+        groupedSettings[setting.group].push(setting);
+      });
+
+      // Render settings for each group
+      for (const groupName in groupedSettings) {
+        const groupDiv = document.createElement('div');
+        groupDiv.classList.add('setting-group');
+
+        const groupHeader = document.createElement('h2');
+        groupHeader.textContent = groupName;
+        groupDiv.appendChild(groupHeader);
+
+        groupedSettings[groupName].forEach(setting => {
+          const settingItem = document.createElement('div');
+          settingItem.classList.add('setting-item');
+
+          const labelDescriptionDiv = document.createElement('div');
+
+          const label = document.createElement('label');
+          label.textContent = setting.label;
+          labelDescriptionDiv.appendChild(label);
+
+          if (setting.description) {
+            const description = document.createElement('p');
+            description.innerHTML = setting.description;
+            labelDescriptionDiv.appendChild(description);
+          }
+
+          const settingItemContent = document.createElement('div');
+          settingItemContent.classList.add('setting-item-content');
+
+          let inputElement;
+          switch (setting.type) {
+            case 'text':
+              inputElement = document.createElement('input');
+              inputElement.type = 'text';
+              inputElement.id = setting.id; //Added setting ID
+              inputElement.value = setting.defaultValue;
+              break;
+            case 'checkbox':
+              const labelDiv = document.createElement('label');
+              labelDiv.classList.add('switch');
+              checkBoxElement = document.createElement('input');
+              checkBoxElement.type = 'checkbox';
+              checkBoxElement.id = setting.id;
+              checkBoxElement.checked = setting.defaultValue;
+              labelDiv.appendChild(checkBoxElement);
+
+              const slider = document.createElement('span');
+              slider.classList.add('slider');
+              slider.classList.add('round');
+              labelDiv.appendChild(slider);
+
+              // Add event listener to the switchDiv
+              labelDiv.addEventListener('click', () => {
+                checkBoxElement.checked = !checkBoxElement.checked;
+              });
+              inputElement = labelDiv;
+              break;
+            case 'select':
+              inputElement = document.createElement('select');
+              inputElement.id = setting.id; //Added setting ID
+              setting.options.forEach(option => {
+                const optionElement = document.createElement('option');
+                optionElement.value = option.value;
+                optionElement.textContent = option.label;
+                if (option === setting.defaultValue) {
+                  optionElement.selected = true;
+                }
+                inputElement.value = setting.defaultValue;
+                inputElement.appendChild(optionElement);
+              });
+              break;
+            case 'color':
+              inputElement = document.createElement('input');
+              inputElement.type = 'color';
+              inputElement.id = setting.id; //Added setting ID
+              inputElement.value = setting.defaultValue;
+              break;
+            case 'number':
+              inputElement = document.createElement('input');
+              inputElement.type = 'number';
+              inputElement.id = setting.id; //Added setting ID
+              inputElement.value = setting.defaultValue;
+              inputElement.min = setting.min;
+              inputElement.max = setting.max;
+              inputElement.step = setting.step;
+              break;
+            default:
+              inputElement = document.createElement('input');
+              inputElement.type = 'text';
+              inputElement.id = setting.id; //Added setting ID
+              inputElement.value = setting.defaultValue;
+          }
+
+          inputElement.addEventListener('input', function (event) {
+            SendDateToParent(data);
+          });
+
+          settingItemContent.appendChild(inputElement);
+
+          settingItem.appendChild(labelDescriptionDiv);
+          settingItem.appendChild(settingItemContent);
+          groupDiv.appendChild(settingItem);
+        });
+
+        settingsContent.appendChild(groupDiv);
+      }
+
+      // saveButton.addEventListener('click', () => {
+      //   SendDateToParent(data);
+      // });
+      SendDateToParent(data);
+    })
+    .catch(error => console.error('Error loading settings:', error));
+});
+
+
+// In the iframe's JavaScript:
+function SendDateToParent(data) {
+  const settings = {};
+  data.settings.forEach(setting => {
+    let inputElement = document.getElementById(setting.id);
+
+    if (setting.type === 'checkbox') {
+      settings[setting.id] = inputElement.checked;
+    } else {
+      settings[setting.id] = inputElement.value;
+    }
+  });
+
+  // Generate parameter string
+  const paramString = Object.entries(settings)
+    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+    .join('&');
+
+  console.log('Parameter String:', paramString);
+
+  let widgetURLBox = document.getElementById('widget-url');
+  widgetURLBox.value = GetWidgetURL() + "?" + paramString;
+  window.parent.reloadWidget(paramString);
+}
+
+
+let saveButton = document.getElementById('save-settings');
+let widgetURLBox = document.getElementById('widget-url');
+let cancelSettingsButton = document.getElementById('cancel-settings');
+
+saveButton.addEventListener('click', () => {
+  navigator.clipboard.writeText(widgetURLBox.value);
+
+  const defaultBackgroundColor = "#2e2e2e";
+  const defaultTextColor = "white";
+
+  saveButton.innerText = "Copied to clipboard";
+  saveButton.style.backgroundColor = "#00dd63"
+  saveButton.style.color = "#ffffff";
+
+  setTimeout(() => {
+    saveButton.innerText = "Click to copy URL";
+    saveButton.style.backgroundColor = defaultBackgroundColor;
+    saveButton.style.color = defaultTextColor;
+  }, 3000);
+});
+
+widgetURLBox.addEventListener('click', () => {
+  let loadSettingsBox = document.getElementById('mommy-milkers');
+  loadSettingsBox.style.visibility = 'visible';
+  loadSettingsBox.style.opacity = 1;
+});
+
+function CloseSettings() {
+  let loadSettingsBox = document.getElementById('mommy-milkers');
+  loadSettingsBox.style.visibility = 'hidden';
+  loadSettingsBox.style.opacity = 0;
+};
+
+function LoadSettings() {
+  let loadURLBox = document.getElementById('load-url');
+  const url = new URL(loadURLBox.value);
+  
+  url.searchParams.forEach((value, key) => {
+
+    const inputElement = document.getElementById(key);
+    if (inputElement != null)
+    {
+      if (inputElement.type == 'checkbox')
+        inputElement.checked = value.toLocaleLowerCase() == 'true';
+      else
+        inputElement.value = value;
+    }
+  });
+
+  loadURLBox.value = '';
+
+  let loadSettingsBox = document.getElementById('mommy-milkers');
+  loadSettingsBox.style.visibility = 'hidden';
+  loadSettingsBox.style.opacity = 0;
+}
+
+function GetWidgetURL() {
+  const parsedUrl = new URL(settingsJson);
+
+  let result = parsedUrl.origin; // Base domain (protocol + hostname + port)
+
+  const pathSegments = parsedUrl.pathname.split('/').filter(segment => segment); // Split and remove empty segments
+
+  if (pathSegments.length > 0) {
+    result += '/' + pathSegments[0]; // Add the first path segment
+  }
+
+  return result;
+}
+
+function OpenMembershipPage() {
+    window.open("https://nutty.gg/supporters/sign_in", '_blank').focus();
+}