// ==UserScript==
// @name Customize Daymap
// @namespace LiamGo
// @version 1.0.2
// @description Customize your profile picture and background on Daymap
// @author LiamGo
// @match https://*.daymap.net/*
// @icon https://www.google.com/s2/favicons?domain=daymap.net
// @grant GM_registerMenuCommand
// @grant GM_getValue
// @grant GM_setValue
// ==/UserScript==
(function() {
'use strict';
// Function to set the background color
function setBackgroundColor(color) {
document.body.style.backgroundColor = color;
GM_setValue('backgroundColor', color); // Save to GM storage
}
// Function to set the background image
function setBackgroundImage(url) {
document.body.style.backgroundImage = `url(${url})`;
document.body.style.backgroundSize = 'cover';
document.body.style.backgroundRepeat = 'no-repeat';
document.body.style.backgroundPosition = 'center';
GM_setValue('backgroundImage', url); // Save to GM storage
}
// Function to set the profile image
function setProfileImage(url) {
const avatarElements = [
document.querySelector('.nav-user-image'), // Updated selector for the first profile image
document.getElementById('divUserAvatar') // Adjust ID for the second profile image
];
avatarElements.forEach(avatarElement => {
if (avatarElement) {
avatarElement.style.backgroundImage = `url(${url})`;
}
});
GM_setValue('profileImage', url); // Save to GM storage
}
// Function to set up the fullscreen icon to open a new tab
function setupFullscreenIcon() {
const fullscreenIcon = document.querySelector('.expFullScreenIcon');
const embeddedUrl = GM_getValue('embeddedUrl', ''); // Retrieve the saved embedded URL
if (fullscreenIcon && embeddedUrl) {
fullscreenIcon.addEventListener('click', () => {
window.open(embeddedUrl, '_blank'); // Open the URL in a new tab
});
}
}
// Check if there's a saved color, image, and profile image in GM storage
const savedColor = GM_getValue('backgroundColor', '#000000'); // Default background color set to black
const savedImage = GM_getValue('backgroundImage', '');
const savedProfileImage = GM_getValue('profileImage', '');
setBackgroundColor(savedColor); // Apply saved color
if (savedImage) setBackgroundImage(savedImage); // Apply saved image
// Set the profile image after a 1.75-second delay
if (savedProfileImage) {
setTimeout(() => {
setProfileImage(savedProfileImage); // Apply saved profile image after 1.75 seconds
}, 1750);
}
// Create a settings modal for background color
const colorModal = createModal('Change Background Color');
const colorInput = createInput('text', savedColor);
colorModal.appendChild(colorInput);
const saveColorButton = createButton('Save', () => {
const newColor = colorInput.value;
setBackgroundColor(newColor);
colorModal.style.display = 'none';
});
const closeColorButton = createButton('Close', () => colorModal.style.display = 'none');
colorModal.appendChild(saveColorButton);
colorModal.appendChild(closeColorButton);
document.body.appendChild(colorModal);
GM_registerMenuCommand("Change Background Color", () => {
colorModal.style.display = 'block';
});
// Create a settings modal for background image
const imageModal = createModal('Change Background Image');
const imageInput = createInput('text', savedImage, 'Enter image URL');
imageModal.appendChild(imageInput);
const saveImageButton = createButton('Save', () => {
const newImage = imageInput.value;
setBackgroundImage(newImage);
imageModal.style.display = 'none';
});
const closeImageButton = createButton('Close', () => imageModal.style.display = 'none');
imageModal.appendChild(saveImageButton);
imageModal.appendChild(closeImageButton);
document.body.appendChild(imageModal);
GM_registerMenuCommand("Change Background Image", () => {
imageModal.style.display = 'block';
});
// Create a settings modal for profile image
const profileImageModal = createModal('Change Profile Image');
const profileImageInput = createInput('text', savedProfileImage, 'Enter profile image URL');
profileImageModal.appendChild(profileImageInput);
const saveProfileImageButton = createButton('Save', () => {
const newProfileImage = profileImageInput.value;
setProfileImage(newProfileImage);
profileImageModal.style.display = 'none';
});
const closeProfileImageButton = createButton('Close', () => profileImageModal.style.display = 'none');
profileImageModal.appendChild(saveProfileImageButton);
profileImageModal.appendChild(closeProfileImageButton);
document.body.appendChild(profileImageModal);
GM_registerMenuCommand("Change Profile Image", () => {
profileImageModal.style.display = 'block';
});
// Create modals for embedding URLs in sections
const sections = ['Indicators', 'My Diary Notes', 'Homework', 'Current Tasks', 'Messages', 'Bulletins', 'Newsletters', 'RC Fact Sheets'];
sections.forEach(section => {
const urlModal = createModal(`Embed Website in ${section}`);
const urlInput = createInput('text', '', 'Enter website URL');
urlModal.appendChild(urlInput);
const addUrlButton = createButton('Embed Website', () => embedUrl(section, urlInput.value));
const removeUrlButton = createButton('Remove Website', () => removeUrl(section));
const closeUrlButton = createButton('Close', () => urlModal.style.display = 'none');
urlModal.appendChild(addUrlButton);
urlModal.appendChild(removeUrlButton);
urlModal.appendChild(closeUrlButton);
document.body.appendChild(urlModal);
GM_registerMenuCommand(`Embed Website in ${section}`, () => {
urlModal.style.display = 'block';
});
// Load saved URL when the script runs
loadSavedUrl(section);
});
function createModal(title) {
const modal = document.createElement('div');
modal.style.display = 'none';
modal.style.position = 'fixed';
modal.style.left = '50%';
modal.style.top = '50%';
modal.style.transform = 'translate(-50%, -50%)';
modal.style.backgroundColor = '#fff';
modal.style.padding = '20px';
modal.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
modal.style.zIndex = '1001';
const titleElement = document.createElement('h3');
titleElement.textContent = title;
modal.appendChild(titleElement);
return modal;
}
function createInput(type, value = '', placeholder = '') {
const input = document.createElement('input');
input.type = type;
input.value = value;
input.placeholder = placeholder;
return input;
}
function createButton(text, onClick) {
const button = document.createElement('button');
button.textContent = text;
button.addEventListener('click', onClick);
return button;
}
function embedUrl(section, url) {
if (url) {
const sectionElement = document.getElementById(section);
if (sectionElement) {
sectionElement.innerHTML = ''; // Clear existing iframes before adding a new one
const iframe = document.createElement('iframe');
iframe.src = url;
iframe.style.width = '100%'; // Adjust width as needed
iframe.style.height = '300px'; // Adjust height as needed
iframe.style.border = '1px solid #ccc'; // Optional: add border
sectionElement.appendChild(iframe);
GM_setValue(`${section}Url`, url); // Save the URL in GM storage
GM_setValue('embeddedUrl', url); // Save the embedded URL for fullscreen icon
}
}
}
function removeUrl(section) {
const sectionElement = document.getElementById(section);
if (sectionElement) {
sectionElement.innerHTML = ''; // Clear the iframe
GM_setValue(`${section}Url`, ''); // Clear the saved URL
GM_setValue('embeddedUrl', ''); // Clear the saved embedded URL
}
}
function loadSavedUrl(section) {
const savedUrl = GM_getValue(`${section}Url`, '');
const sectionElement = document.getElementById(section);
if (sectionElement && savedUrl) {
const iframe = document.createElement('iframe');
iframe.src = savedUrl;
iframe.style.width = '100%'; // Adjust width as needed
iframe.style.height = '300px'; // Adjust height as needed
iframe.style.border = '1px solid #ccc'; // Optional: add border
sectionElement.appendChild(iframe);
GM_setValue('embeddedUrl', savedUrl); // Save the URL for fullscreen icon
}
}
// Setup the fullscreen icon functionality
setupFullscreenIcon();
})();
