From b9786da56f5c319daad455a6239702322d8101e2 Mon Sep 17 00:00:00 2001 From: nuttylmao Date: Wed, 23 Apr 2025 04:56:41 +1000 Subject: [PATCH] Fixed issue with dynamic buttons not working --- .utilities/settings-page-builder/script.js | 476 ++++++++++----------- horizontal-chat/settings/script.js | 8 +- multichat-overlay/settings/script.js | 8 +- multistream-alerts/settings/script.js | 8 +- 4 files changed, 241 insertions(+), 259 deletions(-) diff --git a/.utilities/settings-page-builder/script.js b/.utilities/settings-page-builder/script.js index 0349352..ed66a39 100644 --- a/.utilities/settings-page-builder/script.js +++ b/.utilities/settings-page-builder/script.js @@ -21,205 +21,205 @@ const loadSettingsBox = document.getElementById('loadSettingsWrapper'); ///////////////////////////// fetch(settingsJson) - .then(response => response.json()) - .then(data => { - const groupedSettings = {}; + .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); - }); + // 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'); + // 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); + 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'); - settingItem.id = `item-${setting.id}`; + groupedSettings[groupName].forEach(setting => { + const settingItem = document.createElement('div'); + settingItem.classList.add('setting-item'); + settingItem.id = `item-${setting.id}`; - const labelDescriptionDiv = document.createElement('div'); + const labelDescriptionDiv = document.createElement('div'); - if (setting.label) { - const label = document.createElement('label'); - label.textContent = setting.label; - labelDescriptionDiv.appendChild(label); - } + if (setting.label) { + 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); - } + 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'); + 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); + 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); + 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; - UpdateSettingItemVisibility(); - }); - 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.appendChild(optionElement); - }); - inputElement.value = setting.defaultValue; - 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; - case 'sb-actions': - inputElement = document.createElement('input'); - inputElement.type = 'text'; - inputElement.placeholder = 'Type to search...'; - inputElement.id = setting.id; //Added setting ID - inputElement.value = setting.defaultValue; - inputElement.setAttribute('list', 'streamer-bot-actions'); - inputElement.autocomplete = 'off'; - break; - case 'button': - inputElement = document.createElement('button'); - inputElement.id = setting.id; //Added setting ID - inputElement.textContent = setting.label; + // Add event listener to the switchDiv + labelDiv.addEventListener('click', () => { + checkBoxElement.checked = !checkBoxElement.checked; + UpdateSettingItemVisibility(); + }); + 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.appendChild(optionElement); + }); + inputElement.value = setting.defaultValue; + 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; + case 'sb-actions': + inputElement = document.createElement('input'); + inputElement.type = 'text'; + inputElement.placeholder = 'Type to search...'; + inputElement.id = setting.id; //Added setting ID + inputElement.value = setting.defaultValue; + inputElement.setAttribute('list', 'streamer-bot-actions'); + inputElement.autocomplete = 'off'; + break; + case 'button': + inputElement = document.createElement('button'); + inputElement.id = setting.id; //Added setting ID + inputElement.textContent = setting.label; - inputElement.addEventListener('click', () => { - widgetPreview.contentWindow.callFunction(setting.callFunction); + inputElement.addEventListener('click', () => { + widgetPreview.contentWindow[setting.callFunction](); - const defaultBackgroundColor = "#2e2e2e"; - const defaultTextColor = "white"; + const defaultBackgroundColor = "#2e2e2e"; + const defaultTextColor = "white"; - inputElement.style.transitionDuration = '0s' - inputElement.style.backgroundColor = "#2196f3" - inputElement.style.color = "#ffffff"; + inputElement.style.transitionDuration = '0s' + inputElement.style.backgroundColor = "#2196f3" + inputElement.style.color = "#ffffff"; - setTimeout(() => { - inputElement.style.transitionDuration = '0.2s' - inputElement.style.backgroundColor = defaultBackgroundColor; - inputElement.style.color = defaultTextColor; - }, 100); - }); - break; - default: - inputElement = document.createElement('input'); - inputElement.type = 'text'; - inputElement.id = setting.id; //Added setting ID - inputElement.value = setting.defaultValue; - } + setTimeout(() => { + inputElement.style.transitionDuration = '0.2s' + inputElement.style.backgroundColor = defaultBackgroundColor; + inputElement.style.color = defaultTextColor; + }, 100); + }); + 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) { - RefreshWidgetPreview(data); - }); + inputElement.addEventListener('input', function (event) { + RefreshWidgetPreview(data); + }); - settingItemContent.appendChild(inputElement); + settingItemContent.appendChild(inputElement); - if (setting.type == 'button') { - settingItem.style.display = 'block' - settingItem.appendChild(settingItemContent); - } - else { - settingItem.appendChild(labelDescriptionDiv); - settingItem.appendChild(settingItemContent); - } + if (setting.type == 'button') { + settingItem.style.display = 'block' + settingItem.appendChild(settingItemContent); + } + else { + settingItem.appendChild(labelDescriptionDiv); + settingItem.appendChild(settingItemContent); + } - groupDiv.appendChild(settingItem); - }); + groupDiv.appendChild(settingItem); + }); - settingsPanel.appendChild(groupDiv); - } + settingsPanel.appendChild(groupDiv); + } - function UpdateSettingItemVisibility() { - data.settings.forEach(setting => { - if (setting.showIf) { - if (!document.getElementById(setting.showIf).checked) - document.getElementById(`item-${setting.id}`).style.display = 'none' - else - document.getElementById(`item-${setting.id}`).style.display = 'flex' - } - }); - } + function UpdateSettingItemVisibility() { + data.settings.forEach(setting => { + if (setting.showIf) { + if (!document.getElementById(setting.showIf).checked) + document.getElementById(`item-${setting.id}`).style.display = 'none' + else + document.getElementById(`item-${setting.id}`).style.display = 'flex' + } + }); + } - UpdateSettingItemVisibility(); - RefreshWidgetPreview(data); - }) - .catch(error => console.error('Error loading settings:', error)); + UpdateSettingItemVisibility(); + RefreshWidgetPreview(data); + }) + .catch(error => console.error('Error loading settings:', error)); function RefreshWidgetPreview(data) { - const settings = {}; - data.settings.forEach(setting => { - let inputElement = document.getElementById(setting.id); + 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; - } - }); + 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('&'); + // Generate parameter string + const paramString = Object.entries(settings) + .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`) + .join('&'); - console.debug('Parameter String:', paramString); + console.debug('Parameter String:', paramString); - widgetUrlInput.value = widgetURL + "?" + paramString; - widgetPreview.src = widgetUrlInput.value; + widgetUrlInput.value = widgetURL + "?" + paramString; + widgetPreview.src = widgetUrlInput.value; } @@ -232,37 +232,37 @@ function RefreshWidgetPreview(data) { const sbServerAddress = '127.0.0.1'; const sbServerPort = '8080'; const client = new StreamerbotClient({ - host: sbServerAddress, - port: sbServerPort, + host: sbServerAddress, + port: sbServerPort, - onConnect: (data) => { - console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`) - console.debug(data); + onConnect: (data) => { + console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`) + console.debug(data); - // Get list of actions - GetSBActions(); - }, + // Get list of actions + GetSBActions(); + }, - onDisconnect: () => { - console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`) - } + onDisconnect: () => { + console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`) + } }); async function GetSBActions() { - const response = await client.getActions(); + const response = await client.getActions(); - console.debug(response); + console.debug(response); - const datalistElement = document.createElement('datalist'); - datalistElement.id = 'streamer-bot-actions'; + const datalistElement = document.createElement('datalist'); + datalistElement.id = 'streamer-bot-actions'; - for (const action of response.actions) { - const option = document.createElement('option'); - option.value = action.name; - datalistElement.appendChild(option); - } + for (const action of response.actions) { + const option = document.createElement('option'); + option.value = action.name; + datalistElement.appendChild(option); + } - document.body.appendChild(datalistElement); + document.body.appendChild(datalistElement); } @@ -272,73 +272,73 @@ async function GetSBActions() { ///////////////////////// function CopyURLToClipboard() { - // Copy to clipboard - navigator.clipboard.writeText(widgetUrlInput.value); + // Copy to clipboard + navigator.clipboard.writeText(widgetUrlInput.value); - // Create the "Copied!" message - const copiedMessage = document.createElement('span'); - copiedMessage.textContent = 'Copied to clipboard!'; - copiedMessage.style.textAlign = 'center'; - copiedMessage.style.fontWeight = 'absolute'; - copiedMessage.style.position = 'absolute'; - copiedMessage.style.top = '50%'; - copiedMessage.style.left = '50%'; - copiedMessage.style.transform = 'translate(-50%, -50%)'; - copiedMessage.style.backgroundColor = '#00dd63'; // Green with some transparency - copiedMessage.style.color = 'white'; - copiedMessage.style.padding = '5px 10px'; - copiedMessage.style.borderRadius = '5px'; - copiedMessage.style.zIndex = '2'; // Ensure it's above the input and label - copiedMessage.style.opacity = '0'; // Start with opacity 0 for fade-in - copiedMessage.style.transition = 'opacity 0.2s ease-in-out'; + // Create the "Copied!" message + const copiedMessage = document.createElement('span'); + copiedMessage.textContent = 'Copied to clipboard!'; + copiedMessage.style.textAlign = 'center'; + copiedMessage.style.fontWeight = 'absolute'; + copiedMessage.style.position = 'absolute'; + copiedMessage.style.top = '50%'; + copiedMessage.style.left = '50%'; + copiedMessage.style.transform = 'translate(-50%, -50%)'; + copiedMessage.style.backgroundColor = '#00dd63'; // Green with some transparency + copiedMessage.style.color = 'white'; + copiedMessage.style.padding = '5px 10px'; + copiedMessage.style.borderRadius = '5px'; + copiedMessage.style.zIndex = '2'; // Ensure it's above the input and label + copiedMessage.style.opacity = '0'; // Start with opacity 0 for fade-in + copiedMessage.style.transition = 'opacity 0.2s ease-in-out'; - widgetUrlInputWrapper.appendChild(copiedMessage); + widgetUrlInputWrapper.appendChild(copiedMessage); - // Force a reflow to trigger the transition - void copiedMessage.offsetWidth; + // Force a reflow to trigger the transition + void copiedMessage.offsetWidth; - // Fade in the message - copiedMessage.style.opacity = '1'; + // Fade in the message + copiedMessage.style.opacity = '1'; - // Fade out and remove the message after 3 seconds - setTimeout(() => { - copiedMessage.style.opacity = '0'; - setTimeout(() => { - widgetUrlInputWrapper.removeChild(copiedMessage); - }, 500); // Wait for the fade-out - }, 5000); + // Fade out and remove the message after 3 seconds + setTimeout(() => { + copiedMessage.style.opacity = '0'; + setTimeout(() => { + widgetUrlInputWrapper.removeChild(copiedMessage); + }, 500); // Wait for the fade-out + }, 5000); } function CloseSettings() { - loadSettingsBox.style.visibility = 'hidden'; - loadSettingsBox.style.opacity = 0; + loadSettingsBox.style.visibility = 'hidden'; + loadSettingsBox.style.opacity = 0; }; function LoadSettings() { - const url = new URL(loadURLBox.value); + const url = new URL(loadURLBox.value); - url.searchParams.forEach((value, key) => { + 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; - } - }); + const inputElement = document.getElementById(key); + if (inputElement != null) { + if (inputElement.type == 'checkbox') + inputElement.checked = value.toLocaleLowerCase() == 'true'; + else + inputElement.value = value; + } + }); - loadURLBox.value = ''; + loadURLBox.value = ''; - loadSettingsBox.style.visibility = 'hidden'; - loadSettingsBox.style.opacity = 0; + loadSettingsBox.style.visibility = 'hidden'; + loadSettingsBox.style.opacity = 0; } function OpenMembershipPage() { - window.open("https://nutty.gg/collections/member-exclusive-widgets", '_blank').focus(); + window.open("https://nutty.gg/collections/member-exclusive-widgets", '_blank').focus(); } function OpenLoadSettingsPopup() { - loadSettingsBox.style.visibility = 'visible'; - loadSettingsBox.style.opacity = 1; + loadSettingsBox.style.visibility = 'visible'; + loadSettingsBox.style.opacity = 1; } \ No newline at end of file diff --git a/horizontal-chat/settings/script.js b/horizontal-chat/settings/script.js index 306dd02..b48a330 100644 --- a/horizontal-chat/settings/script.js +++ b/horizontal-chat/settings/script.js @@ -20,10 +20,4 @@ console.debug("Base URL: " + baseURL); console.debug("Settings JSON: " + settingsJSON); console.debug("Widget URL: " + widgetURL); -widgetContainer.src = settingsPageURL + settingsJSON + widgetURL; - -function callFunction(functionName) { - console.debug(`Calling ${functionName}`); - let widget = document.getElementById("widget"); - widget.contentWindow[functionName](); -} \ No newline at end of file +widgetContainer.src = settingsPageURL + settingsJSON + widgetURL; \ No newline at end of file diff --git a/multichat-overlay/settings/script.js b/multichat-overlay/settings/script.js index 306dd02..b48a330 100644 --- a/multichat-overlay/settings/script.js +++ b/multichat-overlay/settings/script.js @@ -20,10 +20,4 @@ console.debug("Base URL: " + baseURL); console.debug("Settings JSON: " + settingsJSON); console.debug("Widget URL: " + widgetURL); -widgetContainer.src = settingsPageURL + settingsJSON + widgetURL; - -function callFunction(functionName) { - console.debug(`Calling ${functionName}`); - let widget = document.getElementById("widget"); - widget.contentWindow[functionName](); -} \ No newline at end of file +widgetContainer.src = settingsPageURL + settingsJSON + widgetURL; \ No newline at end of file diff --git a/multistream-alerts/settings/script.js b/multistream-alerts/settings/script.js index 1bf9727..5372060 100644 --- a/multistream-alerts/settings/script.js +++ b/multistream-alerts/settings/script.js @@ -20,10 +20,4 @@ console.debug("Base URL: " + baseURL); console.debug("Settings JSON: " + settingsJSON); console.debug("Widget URL: " + widgetURL); -widgetContainer.src = settingsPageURL + settingsJSON + widgetURL; - -function callFunction(functionName) { - console.debug(`Calling ${functionName}`); - let widget = document.getElementById("widget"); - widget.contentWindow[functionName](); -} \ No newline at end of file +widgetContainer.src = settingsPageURL + settingsJSON + widgetURL; \ No newline at end of file