diff --git a/.utilities/settings-page-builder/index.html b/.utilities/settings-page-builder/index.html index d02ac8c..8908650 100644 --- a/.utilities/settings-page-builder/index.html +++ b/.utilities/settings-page-builder/index.html @@ -2,49 +2,51 @@ - - - - Settings - - + + + Settings + + - -
-
- - -
-

Widget URL

- -
- - -
- -
- -
-
-
- - -
-
-

Load Settings

- - -
- - - -
+ + -
+ +
+ +
+
+ + + +
+ + +
+
+

Load Settings

+ + +
+ + +
+
+
- \ No newline at end of file + + + \ No newline at end of file diff --git a/.utilities/settings-page-builder/script.js b/.utilities/settings-page-builder/script.js index b62f849..0349352 100644 --- a/.utilities/settings-page-builder/script.js +++ b/.utilities/settings-page-builder/script.js @@ -2,6 +2,231 @@ const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const settingsJson = urlParams.get("settingsJson") || ""; +const widgetURL = urlParams.get("widgetURL") || ""; + +// Page elements +const widgetUrlInputWrapper = document.getElementById('widgetUrlInputWrapper'); +const widgetUrlInput = document.getElementById('widgetUrlInput'); +const urlLabel = document.getElementById('urlLabel'); +const settingsPanel = document.getElementById('settingsPanel'); +const widgetPreview = document.getElementById('widgetPreview'); +const loadURLBox = document.getElementById('loadUrlBox'); +const cancelSettingsButton = document.getElementById('cancelSettingsButton'); +const loadSettingsBox = document.getElementById('loadSettingsWrapper'); + + + +///////////////////////////// +// LOAD FROM SETTINGS.JSON // +///////////////////////////// + +fetch(settingsJson) + .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'); + settingItem.id = `item-${setting.id}`; + + const labelDescriptionDiv = document.createElement('div'); + + 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); + } + + 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; + 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); + + const defaultBackgroundColor = "#2e2e2e"; + const defaultTextColor = "white"; + + 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; + } + + inputElement.addEventListener('input', function (event) { + RefreshWidgetPreview(data); + }); + + settingItemContent.appendChild(inputElement); + + if (setting.type == 'button') { + settingItem.style.display = 'block' + settingItem.appendChild(settingItemContent); + } + else { + settingItem.appendChild(labelDescriptionDiv); + settingItem.appendChild(settingItemContent); + } + + groupDiv.appendChild(settingItem); + }); + + 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' + } + }); + } + + 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); + + 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.debug('Parameter String:', paramString); + + widgetUrlInput.value = widgetURL + "?" + paramString; + widgetPreview.src = widgetUrlInput.value; +} + + + +////////////////// +// STREAMER.BOT // +////////////////// // Connect to Streamer.bot and get list of actions const sbServerAddress = '127.0.0.1'; @@ -14,8 +239,8 @@ const client = new StreamerbotClient({ console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`) console.debug(data); - // Get list of actions - GetSBActions(); + // Get list of actions + GetSBActions(); }, onDisconnect: () => { @@ -24,310 +249,96 @@ const client = new StreamerbotClient({ }); async function GetSBActions() { - const response = await client.getActions(); + const response = await client.getActions(); - console.debug(response); - - const datalistElement = document.createElement('datalist'); - datalistElement.id = 'streamer-bot-actions'; + console.debug(response); - for (const action of response.actions) - { - const option = document.createElement('option'); - option.value = action.name; - datalistElement.appendChild(option); - } + const datalistElement = document.createElement('datalist'); + datalistElement.id = 'streamer-bot-actions'; - document.body.appendChild(datalistElement); -} + for (const action of response.actions) { + const option = document.createElement('option'); + option.value = action.name; + datalistElement.appendChild(option); + } -document.addEventListener('DOMContentLoaded', () => { - - const settingsContent = document.getElementById('settings-content'); - const saveButton = document.getElementById('save-settings'); - - fetch(settingsJson) - .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'); - settingItem.id = `item-${setting.id}`; - - const labelDescriptionDiv = document.createElement('div'); - - 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); - } - - 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; - 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', () => { - window.parent.callFunction(setting.callFunction); - - const defaultBackgroundColor = "#2e2e2e"; - const defaultTextColor = "white"; - - 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; - } - - inputElement.addEventListener('input', function (event) { - SendDataToParent(data); - }); - - settingItemContent.appendChild(inputElement); - - if (setting.type == 'button') - { - settingItem.style.display = 'block' - settingItem.appendChild(settingItemContent); - } - else - { - settingItem.appendChild(labelDescriptionDiv); - settingItem.appendChild(settingItemContent); - } - - groupDiv.appendChild(settingItem); - }); - - settingsContent.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' - } - }); - } - - UpdateSettingItemVisibility(); - - // saveButton.addEventListener('click', () => { - // SendDataToParent(data); - // }); - SendDataToParent(data); - }) - .catch(error => console.error('Error loading settings:', error)); -}); - - -// In the iframe's JavaScript: -function SendDataToParent(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); + document.body.appendChild(datalistElement); } -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); +///////////////////////// +// BUTTON CLICK EVENTS // +///////////////////////// - const defaultBackgroundColor = "#2e2e2e"; - const defaultTextColor = "white"; +function CopyURLToClipboard() { + // Copy to clipboard + navigator.clipboard.writeText(widgetUrlInput.value); - saveButton.innerText = "Copied to clipboard"; - saveButton.style.backgroundColor = "#00dd63" - saveButton.style.color = "#ffffff"; + // 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'; - setTimeout(() => { - saveButton.innerText = "Click to copy URL"; - saveButton.style.backgroundColor = defaultBackgroundColor; - saveButton.style.color = defaultTextColor; - }, 3000); -}); + widgetUrlInputWrapper.appendChild(copiedMessage); + + // Force a reflow to trigger the transition + void copiedMessage.offsetWidth; + + // 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); +} function CloseSettings() { - let loadSettingsBox = document.getElementById('mommy-milkers'); - loadSettingsBox.style.visibility = 'hidden'; - loadSettingsBox.style.opacity = 0; + loadSettingsBox.style.visibility = 'hidden'; + loadSettingsBox.style.opacity = 0; }; function LoadSettings() { - let loadURLBox = document.getElementById('load-url'); - 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 = ''; - 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; - //return 'D:/Projects/GitHub Projects/nutty.gg/multistream-alerts/index.html' + loadSettingsBox.style.visibility = 'hidden'; + loadSettingsBox.style.opacity = 0; } function OpenMembershipPage() { - window.open("https://nutty.gg/supporters/sign_in", '_blank').focus(); + window.open("https://nutty.gg/collections/member-exclusive-widgets", '_blank').focus(); } function OpenLoadSettingsPopup() { - let loadSettingsBox = document.getElementById('mommy-milkers'); - 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/.utilities/settings-page-builder/style.css b/.utilities/settings-page-builder/style.css index 274bc6d..f8dd981 100644 --- a/.utilities/settings-page-builder/style.css +++ b/.utilities/settings-page-builder/style.css @@ -1,273 +1,346 @@ * { - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; - font-size: 16px; - color: white; - --accent-color: #2196f3; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + font-size: 16px; + font-weight: 500; + color: white; + --accent-color: #2196f3; } +html, body { - background-color: #181818; - margin: 0px 20px; + background-color: #181818; + margin: 0px 0px; + display: flex; + flex-flow: column; + height: 100%; + overflow: hidden; + /* Prevent overall page scroll */ } -body::-webkit-scrollbar { - width: 8px; - /* Width of the entire scrollbar */ +#header { + display: flex; + flex-direction: row; + gap: 10px; + align-items: center; + padding: 0px 20px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 1); + /* Add the shadow */ + z-index: 1; + /* Ensure the shadow isn't hidden by content */ } -body::-webkit-scrollbar-track { - background: #2c2c2c; - /* Color of the tracking area */ +#contentArea { + display: flex; + flex-direction: row; + flex-grow: 1; + overflow: hidden; + /* Prevent overall page scroll */ } -body::-webkit-scrollbar-thumb { - background-color: #9f9f9f; - /* Color of the scroll thumb */ - border-radius: 4px; - /* Roundness of the scroll thumb */ - border: none; +#header > button { + width: auto; + /* Allow buttons to size based on content */ + flex-shrink: 0; + /* Prevent buttons from shrinking */ } -body::-webkit-scrollbar-thumb:hover { - background-color: #d1d1d1; - /* Color of the scroll thumb on hover */ +#membershipsButton { + background: var(--accent-color); } -#pinned-header { - position: sticky; - top: 0; - margin: 40px auto; - padding: 10px 0; - z-index: 100; - background: #181818af; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); +#settingsPanel { + width: 600px; + overflow-y: auto; + height: 100%; + padding: 0px 20px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 1); } -#widget-url { - font-size: 1em; - width: 100%; - margin: 10px 0px; - padding: 10px 10px; +#settingsPanel::-webkit-scrollbar { + width: 8px; + /* Width of the entire scrollbar */ } -#settings-container { - margin: 0px auto; - /* border: 1px solid #ddd; */ - border-radius: 5px; +#settingsPanel::-webkit-scrollbar-track { + background: #2c2c2c; + /* Color of the tracking area */ } -#settings-container h1 { - text-align: center; - margin-bottom: 20px; +#settingsPanel::-webkit-scrollbar-thumb { + background-color: #9f9f9f; + /* Color of the scroll thumb */ + border-radius: 4px; + /* Roundness of the scroll thumb */ + border: none; +} + +#settingsPanel::-webkit-scrollbar-thumb:hover { + background-color: #d1d1d1; + /* Color of the scroll thumb on hover */ +} + +#widgetPreview { + flex-grow: 1; + overflow: hidden; + border: transparent; +} + +#widgetUrlInputWrapper { + position: relative; + /* Make the wrapper a positioning context */ + display: inline-block; + /* Or block, depending on your layout */ + width: 100%; + /* Match the input width */ + flex-grow: 1; +} + +#widgetUrlInputWrapper:hover #urlLabel { + opacity: 0; + /* Fade out the label on hover of the wrapper */ +} + +#widgetUrlInput { + font-size: 1em; + width: 100%; + padding: 10px 10px; + filter: blur(4px) brightness(0.4); + /* Apply a blur effect */ + transition: filter 0.1s ease-in-out; + cursor: pointer; +} + +#urlLabel { + border-radius: 0.5em; + padding: 5px 20px; + z-index: 1; +} + +#urlLabel, +#copiedToClipboard { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + pointer-events: none; + opacity: 1; + transition: opacity 0.2s ease-in-out; +} + +#widgetUrlInput:hover { + filter: none; + /* Remove blur when the input is focused */ + outline: none; + /* Remove default focus outline */ } .setting-group { - margin-bottom: 20px; - /* border: 1px solid #ddd; */ - padding-bottom: 15px; - border-radius: 5px; + margin-bottom: 20px; + /* border: 1px solid #ddd; */ + padding-bottom: 15px; + border-radius: 5px; +} + +.setting-group:last-child { + padding-bottom: 0px; } h2 { - font-size: 0.9em; - font-weight: 500; - color: #93cdfd; + font-size: 0.9em; + font-weight: 500; + color: #93cdfd; } .setting-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px 0; - /* border-bottom: 1px solid #eee; */ + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 0; + /* border-bottom: 1px solid #eee; */ } .setting-item:last-child { - border-bottom: none; + padding-bottom: 0px; } .setting-item label { - font-weight: 500; - margin-bottom: 5px; - display: block; + font-weight: 500; + margin-bottom: 5px; + display: block; } .setting-item p, .setting-item a { - font-size: 0.9em; - font-weight: 300; - /* color: #666; */ - opacity: 0.6; - margin: 0; + font-size: 0.9em; + font-weight: 300; + /* color: #666; */ + opacity: 0.6; + margin: 0; } a { - font-weight: 500 !important; + font-weight: 500 !important; } .setting-item-content { - display: flex; - align-items: center; + display: flex; + align-items: center; } input[type="text"], select, input[type="number"] { - width: 250px; - padding: 5px; + width: 250px; + padding: 5px; - margin: 10px 0px; - padding: 10px 10px; - background-color: #ffffff05; - border-width: 0px; - color: white; - border-radius: 0.5em; - - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + margin: 10px 0px; + padding: 10px 10px; + background-color: #ffffff05; + border-width: 0px; + color: white; + border-radius: 0.5em; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .setting-item-content option { - color: black; + color: black; } textarea:focus, input:focus { - outline: none; + outline: none; } .setting-item-content input[type="color"] { - width: 40px; - height: 40px; - margin-left: 10px; - /* padding: 2px; */ - /* border: 1px solid #ccc; */ - /* border-radius: 4px; */ + width: 40px; + height: 40px; + margin-left: 10px; + /* padding: 2px; */ + /* border: 1px solid #ccc; */ + /* border-radius: 4px; */ - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - background: none; - border: 0; - cursor: pointer; - padding: 0; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + background: none; + border: 0; + cursor: pointer; + padding: 0; } /* Switch styling */ .switch { - position: relative; - display: inline-block; - width: 60px; - height: 34px; + position: relative; + display: inline-block; + width: 60px; + height: 34px; } .switch input { - opacity: 0; - width: 0; - height: 0; + opacity: 0; + width: 0; + height: 0; } .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - -webkit-transition: .4s; - transition: .4s; + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; } .slider:before { - position: absolute; - content: ""; - height: 26px; - width: 26px; - left: 4px; - bottom: 4px; - background-color: white; - -webkit-transition: .4s; - transition: .4s; + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; } input:checked+.slider { - background-color: var(--accent-color); + background-color: var(--accent-color); } input:focus+.slider { - box-shadow: 0 0 1px var(--accent-color); + box-shadow: 0 0 1px var(--accent-color); } input:checked+.slider:before { - -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); - transform: translateX(26px); + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); } /* Rounded sliders */ .slider.round { - border-radius: 34px; + border-radius: 34px; } .slider.round:before { - border-radius: 50%; + border-radius: 50%; } button { - font-weight: 500; - background-color: #2e2e2e; - color: white; - opacity: 0.8; - margin: 5px 0px; - border-width: 0; - border-radius: 0.5em; - padding: 10px 20px; - width: 100%; - transition: all 0.2s ease-in-out; + font-weight: 500; + background-color: #2e2e2e; + color: white; + opacity: 0.8; + margin: 5px 0px; + border-width: 0; + border-radius: 0.5em; + padding: 10px 20px; + width: 100%; + transition: all 0.2s ease-in-out; } button:hover { - opacity: 1; - cursor: pointer; + opacity: 1; + cursor: pointer; } -#mommy-milkers { - visibility: hidden; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #181818af; - backdrop-filter: blur(10px); /* Adjust blur radius as needed */ - z-index: 9999; /* Ensure it's on top */ - /* Add any other styles for the overlay content */ - transition: all 0.2s ease-in-out; - opacity: 0; +#loadSettingsWrapper { + visibility: hidden; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #181818af; + backdrop-filter: blur(20px) grayscale(50%) brightness(200%); + /* Adjust blur radius as needed */ + z-index: 9999; + /* Ensure it's on top */ + /* Add any other styles for the overlay content */ + transition: all 0.2s ease-in-out; + opacity: 0; } -#load-url { - width: 100%; -} - -#load-settings-container { - position: fixed; - left: 50%; - top: 50%; - width: calc(100% - 75px); - border-radius: 0.5em; - padding: 1em; - box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); - background: #181818af; - /* background: rgba(255, 0, 0, 0.637); */ - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - transform: translate(-50%, -50%); -} - -#load-settings { - background-color: var(--accent-color); +#loadSettingsContainer { + position: absolute; + left: 50%; + top: 50%; + max-width: 1000px; + width: calc(100% - 75px); + border-radius: 1em; + border: 1px rgba(255, 255, 255, 0.24) solid ; + padding: 1em; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); + background: #181818af; + /* background: rgba(255, 0, 0, 0.637); */ + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + transform: translate(-50%, -50%); } \ No newline at end of file diff --git a/horizontal-chat/settings/index.html b/horizontal-chat/settings/index.html index c4eabbf..f676f98 100644 --- a/horizontal-chat/settings/index.html +++ b/horizontal-chat/settings/index.html @@ -4,61 +4,26 @@ - Settings + + nutty - - - -
- -
- + - \ No newline at end of file diff --git a/horizontal-chat/settings/script.js b/horizontal-chat/settings/script.js index e216b5d..306dd02 100644 --- a/horizontal-chat/settings/script.js +++ b/horizontal-chat/settings/script.js @@ -1,29 +1,29 @@ -let settingsContainer = document.getElementById('settings-container'); -settingsContainer.src = `../../.utilities/settings-page-builder?settingsJson=${window.location.href}/settings.json` -console.log(settingsContainer.src); +const widgetContainer = document.getElementById('widgetContainer'); -function reloadWidget(data) { +const settingsPageURL = '../../.utilities/settings-page-builder'; + +const currentURL = window.location.href; + +let settingsJSON; +let baseURL = currentURL; + +if (baseURL.endsWith("index.html")) + baseURL = baseURL.replace("index.html", ""); + +settingsJSON = "?settingsJson=" + baseURL + "settings.json"; + +const lastSlashIndex = baseURL.lastIndexOf("/"); +let widgetURL = "&widgetURL=" + baseURL.replace("/settings", ""); + +console.debug("Window Ref: " + window.location.href); +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.src = `${getParentUrl()}?${data}`; -} - -function getParentUrl() { - const currentUrl = window.location.href; - const urlParts = currentUrl.split('/'); - - // Remove the last part of the URL (the current page/file) - urlParts.pop(); - - // Remove the last part again to go one directory up - urlParts.pop(); - - // Reconstruct the URL - const parentUrl = urlParts.join('/'); - - // Ensure there's a trailing slash if necessary (if it was a directory) - if (urlParts.length > 2 && !parentUrl.endsWith('/')) { - return parentUrl + '/'; - } - - return parentUrl; + widget.contentWindow[functionName](); } \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 89c3a19..0000000 --- a/index.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - My Simple Page - - - - -
-

Welcome to My Page

-
- -
-

This is the main content area.

-
- - - - - \ No newline at end of file diff --git a/multichat-overlay/settings/index.html b/multichat-overlay/settings/index.html index c4eabbf..f676f98 100644 --- a/multichat-overlay/settings/index.html +++ b/multichat-overlay/settings/index.html @@ -4,61 +4,26 @@ - Settings + + nutty - - - -
- -
- + - \ No newline at end of file diff --git a/multichat-overlay/settings/script.js b/multichat-overlay/settings/script.js index e216b5d..306dd02 100644 --- a/multichat-overlay/settings/script.js +++ b/multichat-overlay/settings/script.js @@ -1,29 +1,29 @@ -let settingsContainer = document.getElementById('settings-container'); -settingsContainer.src = `../../.utilities/settings-page-builder?settingsJson=${window.location.href}/settings.json` -console.log(settingsContainer.src); +const widgetContainer = document.getElementById('widgetContainer'); -function reloadWidget(data) { +const settingsPageURL = '../../.utilities/settings-page-builder'; + +const currentURL = window.location.href; + +let settingsJSON; +let baseURL = currentURL; + +if (baseURL.endsWith("index.html")) + baseURL = baseURL.replace("index.html", ""); + +settingsJSON = "?settingsJson=" + baseURL + "settings.json"; + +const lastSlashIndex = baseURL.lastIndexOf("/"); +let widgetURL = "&widgetURL=" + baseURL.replace("/settings", ""); + +console.debug("Window Ref: " + window.location.href); +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.src = `${getParentUrl()}?${data}`; -} - -function getParentUrl() { - const currentUrl = window.location.href; - const urlParts = currentUrl.split('/'); - - // Remove the last part of the URL (the current page/file) - urlParts.pop(); - - // Remove the last part again to go one directory up - urlParts.pop(); - - // Reconstruct the URL - const parentUrl = urlParts.join('/'); - - // Ensure there's a trailing slash if necessary (if it was a directory) - if (urlParts.length > 2 && !parentUrl.endsWith('/')) { - return parentUrl + '/'; - } - - return parentUrl; + widget.contentWindow[functionName](); } \ No newline at end of file diff --git a/multistream-alerts/settings/index.html b/multistream-alerts/settings/index.html index aebc55b..43a257f 100644 --- a/multistream-alerts/settings/index.html +++ b/multistream-alerts/settings/index.html @@ -1,58 +1,29 @@ + - Settings + + nutty - -
- -
+ + - \ No newline at end of file + \ No newline at end of file diff --git a/multistream-alerts/settings/script.js b/multistream-alerts/settings/script.js index c62f79e..1bf9727 100644 --- a/multistream-alerts/settings/script.js +++ b/multistream-alerts/settings/script.js @@ -1,33 +1,26 @@ -let settingsContainer = document.getElementById('settings-container'); -settingsContainer.src = `../../.utilities/settings-page-builder?settingsJson=${window.location.href}/settings.json` -//settingsContainer.src = `../../.utilities/settings-page-builder?settingsJson=../../multistream-alerts/settings/settings.json` -console.log(settingsContainer.src); +const widgetContainer = document.getElementById('widgetContainer'); -function reloadWidget(data) { - let widget = document.getElementById("widget"); - widget.src = `${getParentUrl()}?${data}`; -} +const settingsPageURL = '../../.utilities/settings-page-builder'; -function getParentUrl() { - const currentUrl = window.location.href; - const urlParts = currentUrl.split('/'); +const currentURL = window.location.href; - // Remove the last part of the URL (the current page/file) - urlParts.pop(); +let settingsJSON; +let baseURL = currentURL; - // Remove the last part again to go one directory up - urlParts.pop(); +if (baseURL.endsWith("index.html")) + baseURL = baseURL.replace("index.html", ""); - // Reconstruct the URL - const parentUrl = urlParts.join('/'); +settingsJSON = "?settingsJson=" + baseURL + "settings.json"; - // Ensure there's a trailing slash if necessary (if it was a directory) - if (urlParts.length > 2 && !parentUrl.endsWith('/')) { - return parentUrl + '/'; - } +const lastSlashIndex = baseURL.lastIndexOf("/"); +let widgetURL = "&widgetURL=" + baseURL.replace("/settings", ""); - return parentUrl; -} +console.debug("Window Ref: " + window.location.href); +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}`);