mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-19 04:00:59 -04:00
Updated to new Settings page
This commit is contained in:
nuttylmao
@@ -4,47 +4,49 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../../.resources/logo.png" type="image/png">
|
||||
<title>Settings</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script type="text/javascript" src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="pinned-header">
|
||||
<div style="display: flex; align-items: center; padding-bottom: 20px;">
|
||||
<img src="../../.resources/logo.png" style="height: 40px;"/>
|
||||
<button style="display: flex; width: auto; margin-left: auto; background: var(--accent-color);" onclick="OpenMembershipPage()">Check out my premium widgets</button>
|
||||
<!-- Header -->
|
||||
<div id="header">
|
||||
<img src="../../.resources/logo.png" style="height: 40px;" />
|
||||
<button id="membershipsButton" onclick="OpenMembershipPage()">Check out my member exclusive widgets!</button>
|
||||
<div id="widgetUrlInputWrapper">
|
||||
<span id="urlLabel">Click to copy URL</span>
|
||||
<input id="widgetUrlInput" type="text" readonly onclick="CopyURLToClipboard()">
|
||||
</div>
|
||||
<h2>Widget URL</h2>
|
||||
<input id="widget-url" type="text" readonly onfocus="this.select();">
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<button id="save-settings">Click to copy URL</button>
|
||||
<button onclick="OpenLoadSettingsPopup()">Load Settings</button>
|
||||
</div>
|
||||
<!-- <button onclick="OpenMembershipPage()">💎 Member Exclusive Widgets</button> -->
|
||||
<button id="loadSettingsButton" onclick="OpenLoadSettingsPopup()">Load Settings</button>
|
||||
</div>
|
||||
|
||||
<div id="settings-container">
|
||||
<div id="settings-content"></div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
<!-- Main Content Area -->
|
||||
<div id="contentArea">
|
||||
|
||||
<div id="mommy-milkers">
|
||||
<div id="load-settings-container">
|
||||
<!-- Settings Panel -->
|
||||
<div id="settingsPanel">
|
||||
</div>
|
||||
|
||||
<!-- Widget Preview Panel -->
|
||||
<iframe id="widgetPreview">
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
<!-- Load Settings Popup -->
|
||||
<div id="loadSettingsWrapper">
|
||||
<div id="loadSettingsContainer">
|
||||
<h2>Load Settings</h2>
|
||||
<label style="font-size: 0.8em;">Paste in your existing widget URL</label>
|
||||
<input id="load-url" type="text">
|
||||
<div style="display: flex;">
|
||||
<button id="cancel-settings" onclick="CloseSettings()">Cancel</button>
|
||||
<span style="width: 20px;"></span>
|
||||
<button id="load-settings" onclick="LoadSettings()">Load Settings</button>
|
||||
<input id="loadUrlBox" type="text" style="width: 100%;">
|
||||
<div style="display: flex; gap: 20px">
|
||||
<button id="cancelSettingsButton" onclick="CloseSettings()">Cancel</button>
|
||||
<button style="background-color: var(--accent-color);" onclick="LoadSettings()">Load Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<script src="script.js"></script>
|
||||
@@ -2,51 +2,25 @@
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const settingsJson = urlParams.get("settingsJson") || "";
|
||||
const widgetURL = urlParams.get("widgetURL") || "";
|
||||
|
||||
// Connect to Streamer.bot and get list of actions
|
||||
const sbServerAddress = '127.0.0.1';
|
||||
const sbServerPort = '8080';
|
||||
const client = new StreamerbotClient({
|
||||
host: sbServerAddress,
|
||||
port: sbServerPort,
|
||||
// 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');
|
||||
|
||||
onConnect: (data) => {
|
||||
console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`)
|
||||
console.debug(data);
|
||||
|
||||
// Get list of actions
|
||||
GetSBActions();
|
||||
},
|
||||
|
||||
onDisconnect: () => {
|
||||
console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`)
|
||||
}
|
||||
});
|
||||
/////////////////////////////
|
||||
// LOAD FROM SETTINGS.JSON //
|
||||
/////////////////////////////
|
||||
|
||||
async function GetSBActions() {
|
||||
const response = await client.getActions();
|
||||
|
||||
console.debug(response);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
document.body.appendChild(datalistElement);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const settingsContent = document.getElementById('settings-content');
|
||||
const saveButton = document.getElementById('save-settings');
|
||||
|
||||
fetch(settingsJson)
|
||||
fetch(settingsJson)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const groupedSettings = {};
|
||||
@@ -163,7 +137,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
inputElement.textContent = setting.label;
|
||||
|
||||
inputElement.addEventListener('click', () => {
|
||||
window.parent.callFunction(setting.callFunction);
|
||||
widgetPreview.contentWindow.callFunction(setting.callFunction);
|
||||
|
||||
const defaultBackgroundColor = "#2e2e2e";
|
||||
const defaultTextColor = "white";
|
||||
@@ -187,18 +161,16 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
inputElement.addEventListener('input', function (event) {
|
||||
SendDataToParent(data);
|
||||
RefreshWidgetPreview(data);
|
||||
});
|
||||
|
||||
settingItemContent.appendChild(inputElement);
|
||||
|
||||
if (setting.type == 'button')
|
||||
{
|
||||
if (setting.type == 'button') {
|
||||
settingItem.style.display = 'block'
|
||||
settingItem.appendChild(settingItemContent);
|
||||
}
|
||||
else
|
||||
{
|
||||
else {
|
||||
settingItem.appendChild(labelDescriptionDiv);
|
||||
settingItem.appendChild(settingItemContent);
|
||||
}
|
||||
@@ -206,13 +178,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
groupDiv.appendChild(settingItem);
|
||||
});
|
||||
|
||||
settingsContent.appendChild(groupDiv);
|
||||
settingsPanel.appendChild(groupDiv);
|
||||
}
|
||||
|
||||
function UpdateSettingItemVisibility() {
|
||||
data.settings.forEach(setting => {
|
||||
if (setting.showIf)
|
||||
{
|
||||
if (setting.showIf) {
|
||||
if (!document.getElementById(setting.showIf).checked)
|
||||
document.getElementById(`item-${setting.id}`).style.display = 'none'
|
||||
else
|
||||
@@ -222,18 +193,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
UpdateSettingItemVisibility();
|
||||
|
||||
// saveButton.addEventListener('click', () => {
|
||||
// SendDataToParent(data);
|
||||
// });
|
||||
SendDataToParent(data);
|
||||
RefreshWidgetPreview(data);
|
||||
})
|
||||
.catch(error => console.error('Error loading settings:', error));
|
||||
});
|
||||
|
||||
|
||||
// In the iframe's JavaScript:
|
||||
function SendDataToParent(data) {
|
||||
|
||||
function RefreshWidgetPreview(data) {
|
||||
const settings = {};
|
||||
data.settings.forEach(setting => {
|
||||
let inputElement = document.getElementById(setting.id);
|
||||
@@ -250,43 +216,105 @@ function SendDataToParent(data) {
|
||||
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
|
||||
.join('&');
|
||||
|
||||
console.log('Parameter String:', paramString);
|
||||
console.debug('Parameter String:', paramString);
|
||||
|
||||
let widgetURLBox = document.getElementById('widget-url');
|
||||
widgetURLBox.value = GetWidgetURL() + "?" + paramString;
|
||||
window.parent.reloadWidget(paramString);
|
||||
widgetUrlInput.value = widgetURL + "?" + paramString;
|
||||
widgetPreview.src = widgetUrlInput.value;
|
||||
}
|
||||
|
||||
|
||||
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);
|
||||
//////////////////
|
||||
// STREAMER.BOT //
|
||||
//////////////////
|
||||
|
||||
const defaultBackgroundColor = "#2e2e2e";
|
||||
const defaultTextColor = "white";
|
||||
// Connect to Streamer.bot and get list of actions
|
||||
const sbServerAddress = '127.0.0.1';
|
||||
const sbServerPort = '8080';
|
||||
const client = new StreamerbotClient({
|
||||
host: sbServerAddress,
|
||||
port: sbServerPort,
|
||||
|
||||
saveButton.innerText = "Copied to clipboard";
|
||||
saveButton.style.backgroundColor = "#00dd63"
|
||||
saveButton.style.color = "#ffffff";
|
||||
onConnect: (data) => {
|
||||
console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`)
|
||||
console.debug(data);
|
||||
|
||||
setTimeout(() => {
|
||||
saveButton.innerText = "Click to copy URL";
|
||||
saveButton.style.backgroundColor = defaultBackgroundColor;
|
||||
saveButton.style.color = defaultTextColor;
|
||||
}, 3000);
|
||||
// Get list of actions
|
||||
GetSBActions();
|
||||
},
|
||||
|
||||
onDisconnect: () => {
|
||||
console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`)
|
||||
}
|
||||
});
|
||||
|
||||
async function GetSBActions() {
|
||||
const response = await client.getActions();
|
||||
|
||||
console.debug(response);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
document.body.appendChild(datalistElement);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/////////////////////////
|
||||
// BUTTON CLICK EVENTS //
|
||||
/////////////////////////
|
||||
|
||||
function CopyURLToClipboard() {
|
||||
// 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';
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
function LoadSettings() {
|
||||
let loadURLBox = document.getElementById('load-url');
|
||||
const url = new URL(loadURLBox.value);
|
||||
|
||||
url.searchParams.forEach((value, key) => {
|
||||
@@ -302,32 +330,15 @@ function LoadSettings() {
|
||||
|
||||
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'
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -1,26 +1,72 @@
|
||||
* {
|
||||
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;
|
||||
margin: 0px 0px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* Prevent overall page scroll */
|
||||
}
|
||||
|
||||
body::-webkit-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 */
|
||||
}
|
||||
|
||||
#contentArea {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
/* Prevent overall page scroll */
|
||||
}
|
||||
|
||||
#header > button {
|
||||
width: auto;
|
||||
/* Allow buttons to size based on content */
|
||||
flex-shrink: 0;
|
||||
/* Prevent buttons from shrinking */
|
||||
}
|
||||
|
||||
#membershipsButton {
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
#settingsPanel {
|
||||
width: 600px;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding: 0px 20px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
#settingsPanel::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
/* Width of the entire scrollbar */
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track {
|
||||
#settingsPanel::-webkit-scrollbar-track {
|
||||
background: #2c2c2c;
|
||||
/* Color of the tracking area */
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
#settingsPanel::-webkit-scrollbar-thumb {
|
||||
background-color: #9f9f9f;
|
||||
/* Color of the scroll thumb */
|
||||
border-radius: 4px;
|
||||
@@ -28,38 +74,65 @@ body::-webkit-scrollbar-thumb {
|
||||
border: none;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb:hover {
|
||||
#settingsPanel::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #d1d1d1;
|
||||
/* Color of the scroll thumb on hover */
|
||||
}
|
||||
|
||||
#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);
|
||||
#widgetPreview {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
#widget-url {
|
||||
#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%;
|
||||
margin: 10px 0px;
|
||||
padding: 10px 10px;
|
||||
filter: blur(4px) brightness(0.4);
|
||||
/* Apply a blur effect */
|
||||
transition: filter 0.1s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#settings-container {
|
||||
margin: 0px auto;
|
||||
/* border: 1px solid #ddd; */
|
||||
border-radius: 5px;
|
||||
#urlLabel {
|
||||
border-radius: 0.5em;
|
||||
padding: 5px 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#settings-container h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
#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 {
|
||||
@@ -69,6 +142,10 @@ body::-webkit-scrollbar-thumb:hover {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.setting-group:last-child {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
@@ -84,7 +161,7 @@ h2 {
|
||||
}
|
||||
|
||||
.setting-item:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.setting-item label {
|
||||
@@ -234,31 +311,31 @@ button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#mommy-milkers {
|
||||
#loadSettingsWrapper {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
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 */
|
||||
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;
|
||||
#loadSettingsContainer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
max-width: 1000px;
|
||||
width: calc(100% - 75px);
|
||||
border-radius: 0.5em;
|
||||
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;
|
||||
@@ -267,7 +344,3 @@ button:hover {
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#load-settings {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
@@ -4,61 +4,26 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Settings</title>
|
||||
<link rel="icon" href="../../.resources/logo.png" type="image/png">
|
||||
<title>nutty</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
/* Remove default body margin */
|
||||
display: flex;
|
||||
/* Use flexbox for layout */
|
||||
background: #181818;
|
||||
}
|
||||
|
||||
#settings-container {
|
||||
width: 600px;
|
||||
/* 50% of viewport width */
|
||||
min-width: 600px;
|
||||
/* 50% of viewport width */
|
||||
#widgetContainer {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* 100% of viewport height */
|
||||
border: none;
|
||||
/* Remove default iframe border */
|
||||
}
|
||||
|
||||
#widget-container {
|
||||
flex-grow: 1;
|
||||
/* Allow the content-container to take up remaining space */
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
width: 50vw;
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
/* Example background for right side */
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
/* Include padding in width/height */
|
||||
border-width: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<iframe id="settings-container"></iframe>
|
||||
|
||||
<div id="widget-container">
|
||||
<iframe id="widget"></iframe>
|
||||
</div>
|
||||
|
||||
<iframe id="widgetContainer"></iframe>
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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]();
|
||||
}
|
||||
-51
@@ -1,51 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>My Simple Page</title>
|
||||
<style>
|
||||
/* Optional: Basic CSS Styling */
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #f0f0f0;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main {
|
||||
flex-grow: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #e0e0e0;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Welcome to My Page</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<p>This is the main content area.</p>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 My Website</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,61 +4,26 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Settings</title>
|
||||
<link rel="icon" href="../../.resources/logo.png" type="image/png">
|
||||
<title>nutty</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
/* Remove default body margin */
|
||||
display: flex;
|
||||
/* Use flexbox for layout */
|
||||
background: #181818;
|
||||
}
|
||||
|
||||
#settings-container {
|
||||
width: 600px;
|
||||
/* 50% of viewport width */
|
||||
min-width: 600px;
|
||||
/* 50% of viewport width */
|
||||
#widgetContainer {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* 100% of viewport height */
|
||||
border: none;
|
||||
/* Remove default iframe border */
|
||||
}
|
||||
|
||||
#widget-container {
|
||||
flex-grow: 1;
|
||||
/* Allow the content-container to take up remaining space */
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
width: 50vw;
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
/* Example background for right side */
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
/* Include padding in width/height */
|
||||
border-width: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<iframe id="settings-container"></iframe>
|
||||
|
||||
<div id="widget-container">
|
||||
<iframe id="widget"></iframe>
|
||||
</div>
|
||||
|
||||
<iframe id="widgetContainer"></iframe>
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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]();
|
||||
}
|
||||
@@ -1,58 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Settings</title>
|
||||
<link rel="icon" href="../../.resources/logo.png" type="image/png">
|
||||
<title>nutty</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
/* Remove default body margin */
|
||||
display: flex;
|
||||
/* Use flexbox for layout */
|
||||
background: #181818;
|
||||
}
|
||||
|
||||
#settings-container {
|
||||
width: 600px;
|
||||
/* 50% of viewport width */
|
||||
min-width: 600px;
|
||||
/* 50% of viewport width */
|
||||
#widgetContainer {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* 100% of viewport height */
|
||||
border: none;
|
||||
/* Remove default iframe border */
|
||||
}
|
||||
|
||||
#widget-container {
|
||||
flex-grow: 1;
|
||||
/* Allow the content-container to take up remaining space */
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
width: 50vw;
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
/* Example background for right side */
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
/* Include padding in width/height */
|
||||
border-width: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<iframe id="settings-container"></iframe>
|
||||
<div id="widget-container">
|
||||
<iframe id="widget"></iframe>
|
||||
</div>
|
||||
<iframe id="widgetContainer"></iframe>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</html>
|
||||
@@ -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}`);
|
||||
|
||||
Reference in New Issue
Block a user