Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-19 04:00:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixed issue with dynamic buttons not working

Browse Source
This commit is contained in:
nuttylmao
2025-04-23 04:56:41 +10:00
parent c4d1b67312
commit b9786da56f
4 changed files with 241 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.utilities/settings-page-builder/script.js
+238 -238
View File
@@ -21,205 +21,205 @@ const loadSettingsBox = document.getElementById('loadSettingsWrapper');
///////////////////////////// /////////////////////////////
fetch(settingsJson) fetch(settingsJson)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
const groupedSettings = {}; const groupedSettings = {};
// Group settings by their 'group' property // Group settings by their 'group' property
data.settings.forEach(setting => { data.settings.forEach(setting => {
if (!groupedSettings[setting.group]) { if (!groupedSettings[setting.group]) {
groupedSettings[setting.group] = []; groupedSettings[setting.group] = [];
} }
groupedSettings[setting.group].push(setting); groupedSettings[setting.group].push(setting);
}); });
// Render settings for each group // Render settings for each group
for (const groupName in groupedSettings) { for (const groupName in groupedSettings) {
const groupDiv = document.createElement('div'); const groupDiv = document.createElement('div');
groupDiv.classList.add('setting-group'); groupDiv.classList.add('setting-group');
const groupHeader = document.createElement('h2'); const groupHeader = document.createElement('h2');
groupHeader.textContent = groupName; groupHeader.textContent = groupName;
groupDiv.appendChild(groupHeader); groupDiv.appendChild(groupHeader);
groupedSettings[groupName].forEach(setting => { groupedSettings[groupName].forEach(setting => {
const settingItem = document.createElement('div'); const settingItem = document.createElement('div');
settingItem.classList.add('setting-item'); settingItem.classList.add('setting-item');
settingItem.id = `item-${setting.id}`; settingItem.id = `item-${setting.id}`;
const labelDescriptionDiv = document.createElement('div'); const labelDescriptionDiv = document.createElement('div');
if (setting.label) { if (setting.label) {
const label = document.createElement('label'); const label = document.createElement('label');
label.textContent = setting.label; label.textContent = setting.label;
labelDescriptionDiv.appendChild(label); labelDescriptionDiv.appendChild(label);
} }
if (setting.description) { if (setting.description) {
const description = document.createElement('p'); const description = document.createElement('p');
description.innerHTML = setting.description; description.innerHTML = setting.description;
labelDescriptionDiv.appendChild(description); labelDescriptionDiv.appendChild(description);
} }
const settingItemContent = document.createElement('div'); const settingItemContent = document.createElement('div');
settingItemContent.classList.add('setting-item-content'); settingItemContent.classList.add('setting-item-content');
let inputElement; let inputElement;
switch (setting.type) { switch (setting.type) {
case 'text': case 'text':
inputElement = document.createElement('input'); inputElement = document.createElement('input');
inputElement.type = 'text'; inputElement.type = 'text';
inputElement.id = setting.id; //Added setting ID inputElement.id = setting.id; //Added setting ID
inputElement.value = setting.defaultValue; inputElement.value = setting.defaultValue;
break; break;
case 'checkbox': case 'checkbox':
const labelDiv = document.createElement('label'); const labelDiv = document.createElement('label');
labelDiv.classList.add('switch'); labelDiv.classList.add('switch');
checkBoxElement = document.createElement('input'); checkBoxElement = document.createElement('input');
checkBoxElement.type = 'checkbox'; checkBoxElement.type = 'checkbox';
checkBoxElement.id = setting.id; checkBoxElement.id = setting.id;
checkBoxElement.checked = setting.defaultValue; checkBoxElement.checked = setting.defaultValue;
labelDiv.appendChild(checkBoxElement); labelDiv.appendChild(checkBoxElement);
const slider = document.createElement('span'); const slider = document.createElement('span');
slider.classList.add('slider'); slider.classList.add('slider');
slider.classList.add('round'); slider.classList.add('round');
labelDiv.appendChild(slider); labelDiv.appendChild(slider);
// Add event listener to the switchDiv // Add event listener to the switchDiv
labelDiv.addEventListener('click', () => { labelDiv.addEventListener('click', () => {
checkBoxElement.checked = !checkBoxElement.checked; checkBoxElement.checked = !checkBoxElement.checked;
UpdateSettingItemVisibility(); UpdateSettingItemVisibility();
}); });
inputElement = labelDiv; inputElement = labelDiv;
break; break;
case 'select': case 'select':
inputElement = document.createElement('select'); inputElement = document.createElement('select');
inputElement.id = setting.id; //Added setting ID inputElement.id = setting.id; //Added setting ID
setting.options.forEach(option => { setting.options.forEach(option => {
const optionElement = document.createElement('option'); const optionElement = document.createElement('option');
optionElement.value = option.value; optionElement.value = option.value;
optionElement.textContent = option.label; optionElement.textContent = option.label;
if (option === setting.defaultValue) { if (option === setting.defaultValue) {
optionElement.selected = true; optionElement.selected = true;
} }
inputElement.appendChild(optionElement); inputElement.appendChild(optionElement);
}); });
inputElement.value = setting.defaultValue; inputElement.value = setting.defaultValue;
break; break;
case 'color': case 'color':
inputElement = document.createElement('input'); inputElement = document.createElement('input');
inputElement.type = 'color'; inputElement.type = 'color';
inputElement.id = setting.id; //Added setting ID inputElement.id = setting.id; //Added setting ID
inputElement.value = setting.defaultValue; inputElement.value = setting.defaultValue;
break; break;
case 'number': case 'number':
inputElement = document.createElement('input'); inputElement = document.createElement('input');
inputElement.type = 'number'; inputElement.type = 'number';
inputElement.id = setting.id; //Added setting ID inputElement.id = setting.id; //Added setting ID
inputElement.value = setting.defaultValue; inputElement.value = setting.defaultValue;
inputElement.min = setting.min; inputElement.min = setting.min;
inputElement.max = setting.max; inputElement.max = setting.max;
inputElement.step = setting.step; inputElement.step = setting.step;
break; break;
case 'sb-actions': case 'sb-actions':
inputElement = document.createElement('input'); inputElement = document.createElement('input');
inputElement.type = 'text'; inputElement.type = 'text';
inputElement.placeholder = 'Type to search...'; inputElement.placeholder = 'Type to search...';
inputElement.id = setting.id; //Added setting ID inputElement.id = setting.id; //Added setting ID
inputElement.value = setting.defaultValue; inputElement.value = setting.defaultValue;
inputElement.setAttribute('list', 'streamer-bot-actions'); inputElement.setAttribute('list', 'streamer-bot-actions');
inputElement.autocomplete = 'off'; inputElement.autocomplete = 'off';
break; break;
case 'button': case 'button':
inputElement = document.createElement('button'); inputElement = document.createElement('button');
inputElement.id = setting.id; //Added setting ID inputElement.id = setting.id; //Added setting ID
inputElement.textContent = setting.label; inputElement.textContent = setting.label;
inputElement.addEventListener('click', () => { inputElement.addEventListener('click', () => {
widgetPreview.contentWindow.callFunction(setting.callFunction); widgetPreview.contentWindow[setting.callFunction]();
const defaultBackgroundColor = "#2e2e2e"; const defaultBackgroundColor = "#2e2e2e";
const defaultTextColor = "white"; const defaultTextColor = "white";
inputElement.style.transitionDuration = '0s' inputElement.style.transitionDuration = '0s'
inputElement.style.backgroundColor = "#2196f3" inputElement.style.backgroundColor = "#2196f3"
inputElement.style.color = "#ffffff"; inputElement.style.color = "#ffffff";
setTimeout(() => { setTimeout(() => {
inputElement.style.transitionDuration = '0.2s' inputElement.style.transitionDuration = '0.2s'
inputElement.style.backgroundColor = defaultBackgroundColor; inputElement.style.backgroundColor = defaultBackgroundColor;
inputElement.style.color = defaultTextColor; inputElement.style.color = defaultTextColor;
}, 100); }, 100);
}); });
break; break;
default: default:
inputElement = document.createElement('input'); inputElement = document.createElement('input');
inputElement.type = 'text'; inputElement.type = 'text';
inputElement.id = setting.id; //Added setting ID inputElement.id = setting.id; //Added setting ID
inputElement.value = setting.defaultValue; inputElement.value = setting.defaultValue;
} }
inputElement.addEventListener('input', function (event) { inputElement.addEventListener('input', function (event) {
RefreshWidgetPreview(data); RefreshWidgetPreview(data);
}); });
settingItemContent.appendChild(inputElement); settingItemContent.appendChild(inputElement);
if (setting.type == 'button') { if (setting.type == 'button') {
settingItem.style.display = 'block' settingItem.style.display = 'block'
settingItem.appendChild(settingItemContent); settingItem.appendChild(settingItemContent);
} }
else { else {
settingItem.appendChild(labelDescriptionDiv); settingItem.appendChild(labelDescriptionDiv);
settingItem.appendChild(settingItemContent); settingItem.appendChild(settingItemContent);
} }
groupDiv.appendChild(settingItem); groupDiv.appendChild(settingItem);
}); });
settingsPanel.appendChild(groupDiv); settingsPanel.appendChild(groupDiv);
} }
function UpdateSettingItemVisibility() { function UpdateSettingItemVisibility() {
data.settings.forEach(setting => { data.settings.forEach(setting => {
if (setting.showIf) { if (setting.showIf) {
if (!document.getElementById(setting.showIf).checked) if (!document.getElementById(setting.showIf).checked)
document.getElementById(`item-${setting.id}`).style.display = 'none' document.getElementById(`item-${setting.id}`).style.display = 'none'
else else
document.getElementById(`item-${setting.id}`).style.display = 'flex' document.getElementById(`item-${setting.id}`).style.display = 'flex'
} }
}); });
} }
UpdateSettingItemVisibility(); UpdateSettingItemVisibility();
RefreshWidgetPreview(data); RefreshWidgetPreview(data);
}) })
.catch(error => console.error('Error loading settings:', error)); .catch(error => console.error('Error loading settings:', error));
function RefreshWidgetPreview(data) { function RefreshWidgetPreview(data) {
const settings = {}; const settings = {};
data.settings.forEach(setting => { data.settings.forEach(setting => {
let inputElement = document.getElementById(setting.id); let inputElement = document.getElementById(setting.id);
if (setting.type === 'checkbox') { if (setting.type === 'checkbox') {
settings[setting.id] = inputElement.checked; settings[setting.id] = inputElement.checked;
} else { } else {
settings[setting.id] = inputElement.value; settings[setting.id] = inputElement.value;
} }
}); });
// Generate parameter string // Generate parameter string
const paramString = Object.entries(settings) const paramString = Object.entries(settings)
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`) .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&'); .join('&');
console.debug('Parameter String:', paramString); console.debug('Parameter String:', paramString);
widgetUrlInput.value = widgetURL + "?" + paramString; widgetUrlInput.value = widgetURL + "?" + paramString;
widgetPreview.src = widgetUrlInput.value; widgetPreview.src = widgetUrlInput.value;
} }
@@ -232,37 +232,37 @@ function RefreshWidgetPreview(data) {
const sbServerAddress = '127.0.0.1'; const sbServerAddress = '127.0.0.1';
const sbServerPort = '8080'; const sbServerPort = '8080';
const client = new StreamerbotClient({ const client = new StreamerbotClient({
host: sbServerAddress, host: sbServerAddress,
port: sbServerPort, port: sbServerPort,
onConnect: (data) => { onConnect: (data) => {
console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`) console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`)
console.debug(data); console.debug(data);
// Get list of actions // Get list of actions
GetSBActions(); GetSBActions();
}, },
onDisconnect: () => { onDisconnect: () => {
console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`) console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`)
} }
}); });
async function GetSBActions() { async function GetSBActions() {
const response = await client.getActions(); const response = await client.getActions();
console.debug(response); console.debug(response);
const datalistElement = document.createElement('datalist'); const datalistElement = document.createElement('datalist');
datalistElement.id = 'streamer-bot-actions'; datalistElement.id = 'streamer-bot-actions';
for (const action of response.actions) { for (const action of response.actions) {
const option = document.createElement('option'); const option = document.createElement('option');
option.value = action.name; option.value = action.name;
datalistElement.appendChild(option); datalistElement.appendChild(option);
} }
document.body.appendChild(datalistElement); document.body.appendChild(datalistElement);
} }
@@ -272,73 +272,73 @@ async function GetSBActions() {
///////////////////////// /////////////////////////
function CopyURLToClipboard() { function CopyURLToClipboard() {
// Copy to clipboard // Copy to clipboard
navigator.clipboard.writeText(widgetUrlInput.value); navigator.clipboard.writeText(widgetUrlInput.value);
// Create the "Copied!" message // Create the "Copied!" message
const copiedMessage = document.createElement('span'); const copiedMessage = document.createElement('span');
copiedMessage.textContent = 'Copied to clipboard!'; copiedMessage.textContent = 'Copied to clipboard!';
copiedMessage.style.textAlign = 'center'; copiedMessage.style.textAlign = 'center';
copiedMessage.style.fontWeight = 'absolute'; copiedMessage.style.fontWeight = 'absolute';
copiedMessage.style.position = 'absolute'; copiedMessage.style.position = 'absolute';
copiedMessage.style.top = '50%'; copiedMessage.style.top = '50%';
copiedMessage.style.left = '50%'; copiedMessage.style.left = '50%';
copiedMessage.style.transform = 'translate(-50%, -50%)'; copiedMessage.style.transform = 'translate(-50%, -50%)';
copiedMessage.style.backgroundColor = '#00dd63'; // Green with some transparency copiedMessage.style.backgroundColor = '#00dd63'; // Green with some transparency
copiedMessage.style.color = 'white'; copiedMessage.style.color = 'white';
copiedMessage.style.padding = '5px 10px'; copiedMessage.style.padding = '5px 10px';
copiedMessage.style.borderRadius = '5px'; copiedMessage.style.borderRadius = '5px';
copiedMessage.style.zIndex = '2'; // Ensure it's above the input and label 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.opacity = '0'; // Start with opacity 0 for fade-in
copiedMessage.style.transition = 'opacity 0.2s ease-in-out'; copiedMessage.style.transition = 'opacity 0.2s ease-in-out';
widgetUrlInputWrapper.appendChild(copiedMessage); widgetUrlInputWrapper.appendChild(copiedMessage);
// Force a reflow to trigger the transition // Force a reflow to trigger the transition
void copiedMessage.offsetWidth; void copiedMessage.offsetWidth;
// Fade in the message // Fade in the message
copiedMessage.style.opacity = '1'; copiedMessage.style.opacity = '1';
// Fade out and remove the message after 3 seconds // Fade out and remove the message after 3 seconds
setTimeout(() => { setTimeout(() => {
copiedMessage.style.opacity = '0'; copiedMessage.style.opacity = '0';
setTimeout(() => { setTimeout(() => {
widgetUrlInputWrapper.removeChild(copiedMessage); widgetUrlInputWrapper.removeChild(copiedMessage);
}, 500); // Wait for the fade-out }, 500); // Wait for the fade-out
}, 5000); }, 5000);
} }
function CloseSettings() { function CloseSettings() {
loadSettingsBox.style.visibility = 'hidden'; loadSettingsBox.style.visibility = 'hidden';
loadSettingsBox.style.opacity = 0; loadSettingsBox.style.opacity = 0;
}; };
function LoadSettings() { 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); const inputElement = document.getElementById(key);
if (inputElement != null) { if (inputElement != null) {
if (inputElement.type == 'checkbox') if (inputElement.type == 'checkbox')
inputElement.checked = value.toLocaleLowerCase() == 'true'; inputElement.checked = value.toLocaleLowerCase() == 'true';
else else
inputElement.value = value; inputElement.value = value;
} }
}); });
loadURLBox.value = ''; loadURLBox.value = '';
loadSettingsBox.style.visibility = 'hidden'; loadSettingsBox.style.visibility = 'hidden';
loadSettingsBox.style.opacity = 0; loadSettingsBox.style.opacity = 0;
} }
function OpenMembershipPage() { 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() { function OpenLoadSettingsPopup() {
loadSettingsBox.style.visibility = 'visible'; loadSettingsBox.style.visibility = 'visible';
loadSettingsBox.style.opacity = 1; loadSettingsBox.style.opacity = 1;
} }
horizontal-chat/settings/script.js
-6
View File
@@ -21,9 +21,3 @@ console.debug("Settings JSON: " + settingsJSON);
console.debug("Widget URL: " + widgetURL); console.debug("Widget URL: " + widgetURL);
widgetContainer.src = settingsPageURL + settingsJSON + widgetURL; widgetContainer.src = settingsPageURL + settingsJSON + widgetURL;
function callFunction(functionName) {
console.debug(`Calling ${functionName}`);
let widget = document.getElementById("widget");
widget.contentWindow[functionName]();
}
multichat-overlay/settings/script.js
-6
View File
@@ -21,9 +21,3 @@ console.debug("Settings JSON: " + settingsJSON);
console.debug("Widget URL: " + widgetURL); console.debug("Widget URL: " + widgetURL);
widgetContainer.src = settingsPageURL + settingsJSON + widgetURL; widgetContainer.src = settingsPageURL + settingsJSON + widgetURL;
function callFunction(functionName) {
console.debug(`Calling ${functionName}`);
let widget = document.getElementById("widget");
widget.contentWindow[functionName]();
}
multistream-alerts/settings/script.js
-6
View File
@@ -21,9 +21,3 @@ console.debug("Settings JSON: " + settingsJSON);
console.debug("Widget URL: " + widgetURL); console.debug("Widget URL: " + widgetURL);
widgetContainer.src = settingsPageURL + settingsJSON + widgetURL; widgetContainer.src = settingsPageURL + settingsJSON + widgetURL;
function callFunction(functionName) {
console.debug(`Calling ${functionName}`);
let widget = document.getElementById("widget");
widget.contentWindow[functionName]();
}