Adds custom UI enhancements
目前為
// ==UserScript==
// @name AAC Enhanced
// @namespace http://tampermonkey.net/
// @version 1.4
// @copyright 2024, Asriel(https://greasyfork.org/de/users/1375984-asriel-aac)
// @license MIT
// @description Adds custom UI enhancements
// @author Asriel
// @icon https://i.ibb.co/z5CJ5zv/revanced.png
// @supportURL https://greasyfork.org/de/scripts/511351-aac-enhanced/feedback
// @setupURL https://update.greasyfork.org/scripts/511351/AAC%20Enhanced.user.js
// @include /^https?:\/\/(www\.)?anime\.academy\/chat/
// @grant none
// ==/UserScript==
(function() {
'use strict';
const scriptName = GM_info.script.name;
const scriptVersion = GM_info.script.version;
window.AACEnhancedScriptID = `${scriptName.replace(/\s+/g, '-')}-${scriptVersion}`;
console.log(window.AACEnhancedScriptID);
// Main Application Namespace
const MyApp = {
init: function() {
this.loadModules();
},
loadModules: function() {
TopWrapperIcon.init();
ButtonStyler.init();
WallpaperChanger.init();
ChatArea.init();
}
};
// Top Wrapper Icon Module
const TopWrapperIcon = {
init: function() {
this.addIconToTopWrapper();
},
addIconToTopWrapper: function() {
const topWrapper = document.querySelector('.topwrapper');
if (topWrapper) {
const iconButton = document.createElement('div');
iconButton.id = 'topWrapperIcon';
iconButton.style.width = '40px';
iconButton.style.height = '40px';
iconButton.style.borderRadius = '50%';
iconButton.style.display = 'flex';
iconButton.style.alignItems = 'center';
iconButton.style.justifyContent = 'center';
iconButton.style.cursor = 'pointer';
iconButton.style.marginRight = '10px';
iconButton.style.boxShadow = '0 0 5px rgba(0, 0, 0, 0.2)';
// Create image element for the icon
const iconImage = document.createElement('img');
iconImage.src = 'https://i.ibb.co/z5CJ5zv/revanced.png';
iconImage.alt = 'Menu Icon';
iconImage.style.width = '100%';
iconImage.style.height = '100%';
iconImage.style.borderRadius = '50%';
iconButton.appendChild(iconImage);
// Event listener to open a placeholder menu when clicked
iconButton.addEventListener('click', Menu.createPlaceholderMenu);
topWrapper.appendChild(iconButton);
} else {
console.warn('Top wrapper not found. Icon could not be added.');
}
}
};
// Menu Module
const Menu = {
createPlaceholderMenu: function() {
const existingMenu = document.querySelector('#placeholderMenu');
if (existingMenu) {
existingMenu.remove();
return;
}
const menu = document.createElement('div');
menu.id = 'placeholderMenu';
menu.style.position = 'fixed';
menu.style.top = '50%';
menu.style.left = '50%';
menu.style.transform = 'translate(-50%, -50%)';
menu.style.zIndex = '10001';
menu.style.padding = '20px';
menu.style.backgroundColor = '#fff';
menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
menu.style.borderRadius = '10px';
menu.style.textAlign = 'center';
const title = document.createElement('h3');
title.innerText = 'Custom Menu';
title.style.marginBottom = '20px';
// Add Wallpaper Changer Button
const wallpaperChangerButton = document.createElement('button');
wallpaperChangerButton.innerText = 'Change Wallpaper';
wallpaperChangerButton.style.padding = '10px';
wallpaperChangerButton.style.backgroundColor = '#573699';
wallpaperChangerButton.style.color = '#fff';
wallpaperChangerButton.style.border = 'none';
wallpaperChangerButton.style.borderRadius = '5px';
wallpaperChangerButton.style.cursor = 'pointer';
wallpaperChangerButton.style.marginBottom = '10px';
wallpaperChangerButton.addEventListener('click', () => {
WallpaperChanger.createInputMenu();
menu.remove(); // Close the menu after clicking wallpaper changer
});
// Add Toggle Draggable Chat Area Button
const toggleChatAreaButton = document.createElement('button');
toggleChatAreaButton.id = 'toggleChatAreaButton';
toggleChatAreaButton.style.padding = '10px';
toggleChatAreaButton.style.color = '#fff';
toggleChatAreaButton.style.border = 'none';
toggleChatAreaButton.style.borderRadius = '5px';
toggleChatAreaButton.style.cursor = 'pointer';
toggleChatAreaButton.style.marginBottom = '10px';
toggleChatAreaButton.addEventListener('click', () => {
ChatArea.toggleDraggable();
});
// Add Toggle Leftbar Visibility Button
const toggleLeftbarButton = document.createElement('button');
toggleLeftbarButton.id = 'toggleLeftbarButton';
toggleLeftbarButton.style.padding = '10px';
toggleLeftbarButton.style.color = '#fff';
toggleLeftbarButton.style.border = 'none';
toggleLeftbarButton.style.borderRadius = '5px';
toggleLeftbarButton.style.cursor = 'pointer';
toggleLeftbarButton.style.marginBottom = '10px';
toggleLeftbarButton.addEventListener('click', () => {
Menu.toggleLeftbarVisibility();
});
// Append the buttons to the menu
menu.appendChild(title);
menu.appendChild(wallpaperChangerButton);
menu.appendChild(document.createElement('br'));
menu.appendChild(toggleChatAreaButton);
menu.appendChild(document.createElement('br'));
menu.appendChild(toggleLeftbarButton);
menu.appendChild(document.createElement('br'));
// Close button for the menu
const closeButton = document.createElement('button');
closeButton.innerText = 'Close';
closeButton.style.padding = '10px';
closeButton.style.backgroundColor = '#ccc';
closeButton.style.color = '#000';
closeButton.style.border = 'none';
closeButton.style.borderRadius = '5px';
closeButton.style.cursor = 'pointer';
closeButton.addEventListener('click', () => {
menu.remove();
});
menu.appendChild(closeButton);
document.body.appendChild(menu);
// Update the toggle buttons state based on saved settings
ChatArea.updateToggleButton();
Menu.updateToggleLeftbarButton();
},
toggleLeftbarVisibility: function() {
const leftbar = document.querySelector('#leftbar');
if (!leftbar) return;
if (leftbar.style.display === 'none') {
leftbar.style.display = '';
localStorage.setItem('leftbarVisibility', 'visible');
} else {
leftbar.style.display = 'none';
localStorage.setItem('leftbarVisibility', 'hidden');
}
Menu.updateToggleLeftbarButton();
},
updateToggleLeftbarButton: function() {
const toggleLeftbarButton = document.querySelector('#toggleLeftbarButton');
const leftbarVisible = localStorage.getItem('leftbarVisibility') !== 'hidden';
if (toggleLeftbarButton) {
if (leftbarVisible) {
toggleLeftbarButton.innerText = 'Hide Leftbar';
toggleLeftbarButton.style.backgroundColor = '#573699'; // Default color
} else {
toggleLeftbarButton.innerText = 'Show Leftbar';
toggleLeftbarButton.style.backgroundColor = '#FF0000'; // Red color when hidden
}
}
}
};
// Initialize the leftbar visibility state on load
document.addEventListener('DOMContentLoaded', () => {
const leftbar = document.querySelector('#leftbar');
if (leftbar) {
const leftbarVisible = localStorage.getItem('leftbarVisibility') !== 'hidden';
leftbar.style.display = leftbarVisible ? '' : 'none';
}
});
// Button Styler Module
const ButtonStyler = {
init: function() {
this.styleButtons();
},
styleButtons: function() {
const leftbarContent = document.querySelector('.leftbarContent.ng-scope');
if (leftbarContent) {
// Styling for Premium Settings Button
const premiumButton = leftbarContent.querySelector('[ng-click="showPremiumSettings()"]');
if (premiumButton) {
this.applyButtonStyles(premiumButton, 'Mikrofon-Farbe ändern');
}
// Styling for Emoji Upload Button
const emojiButton = leftbarContent.querySelector('[ng-click="goToEmojiUpload()"]');
if (emojiButton) {
this.applyButtonStyles(emojiButton, 'Emojis hochladen');
}
} else {
console.warn('Leftbar content not found. Buttons could not be styled.');
}
},
applyButtonStyles: function(button, buttonText) {
const styledButton = document.createElement('button');
styledButton.innerText = buttonText;
styledButton.style.padding = '10px 20px';
styledButton.style.backgroundColor = '#573699';
styledButton.style.color = '#fff';
styledButton.style.border = 'none';
styledButton.style.borderRadius = '5px';
styledButton.style.cursor = 'pointer';
styledButton.style.fontWeight = 'bold';
styledButton.style.transition = 'background-color 0.3s ease';
styledButton.style.display = 'inline-block';
styledButton.style.marginTop = '10px';
styledButton.addEventListener('mouseenter', () => {
styledButton.style.backgroundColor = '#6848ab';
});
styledButton.addEventListener('mouseleave', () => {
styledButton.style.backgroundColor = '#573699';
});
button.parentNode.replaceChild(styledButton, button);
}
};
// Wallpaper Changer Module
const WallpaperChanger = {
init: function() {
this.applySavedBackground();
},
applySavedBackground: function() {
const savedImageUrl = localStorage.getItem('customBackgroundUrl');
if (savedImageUrl) {
this.applyCustomBackground(savedImageUrl);
}
},
applyCustomBackground: function(url) {
if (url) {
document.documentElement.style.cssText = `
background-image: url("${url}") !important;
background-color: #000 !important;
background-position: center center !important;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
`;
document.body.style.cssText = `
background-image: url("${url}") !important;
background-color: #000 !important;
background-position: center center !important;
background-attachment: fixed !important;
background-size: cover !important;
background-repeat: no-repeat !important;
`;
}
},
createInputMenu: function() {
const menu = document.createElement('div');
menu.style.position = 'fixed';
menu.style.top = '50%';
menu.style.left = '50%';
menu.style.transform = 'translate(-50%, -50%)';
menu.style.zIndex = '10001';
menu.style.padding = '20px';
menu.style.backgroundColor = '#fff';
menu.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
menu.style.borderRadius = '10px';
menu.style.textAlign = 'center';
const input = document.createElement('input');
input.type = 'text';
input.placeholder = 'Enter image URL here...';
input.value = localStorage.getItem('customBackgroundUrl') || '';
input.style.width = '300px';
input.style.padding = '10px';
input.style.marginBottom = '10px';
input.style.border = '1px solid #ccc';
input.style.borderRadius = '5px';
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*';
fileInput.style.marginBottom = '10px';
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const imageUrl = e.target.result;
localStorage.setItem('customBackgroundUrl', imageUrl);
this.applyCustomBackground(imageUrl);
menu.remove();
};
reader.readAsDataURL(file);
}
});
const applyButton = document.createElement('button');
applyButton.innerText = 'Apply Background';
applyButton.style.marginLeft = '10px';
applyButton.style.padding = '10px';
applyButton.style.backgroundColor = '#573699';
applyButton.style.color = '#fff';
applyButton.style.border = 'none';
applyButton.style.borderRadius = '5px';
applyButton.style.cursor = 'pointer';
applyButton.addEventListener('click', () => {
const imageUrl = input.value.trim();
if (imageUrl) {
localStorage.setItem('customBackgroundUrl', imageUrl);
this.applyCustomBackground(imageUrl);
menu.remove();
} else {
alert('Please enter a valid URL.');
}
});
const closeButton = document.createElement('button');
closeButton.innerText = 'Close';
closeButton.style.marginTop = '10px';
closeButton.style.padding = '10px';
closeButton.style.backgroundColor = '#ccc';
closeButton.style.color = '#000';
closeButton.style.border = 'none';
closeButton.style.borderRadius = '5px';
closeButton.style.cursor = 'pointer';
closeButton.addEventListener('click', () => {
menu.remove();
});
menu.appendChild(input);
menu.appendChild(document.createElement('br'));
menu.appendChild(fileInput);
menu.appendChild(applyButton);
menu.appendChild(document.createElement('br'));
menu.appendChild(closeButton);
document.body.appendChild(menu);
}
};
// Chat Area Module
const ChatArea = {
isDraggable: false,
init: function() {
this.chatArea = document.querySelector('#graphicChatArea');
if (this.chatArea) {
this.centerChatArea();
this.chatArea.style.position = 'absolute';
// Load saved state from localStorage
const savedState = localStorage.getItem('isChatAreaDraggable');
if (savedState === 'true') {
this.enableDraggable();
}
}
},
centerChatArea: function() {
if (this.chatArea) {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const chatWidth = this.chatArea.offsetWidth;
const chatHeight = this.chatArea.offsetHeight;
this.chatArea.style.left = `${(windowWidth - chatWidth) / 2}px`;
this.chatArea.style.top = `${(windowHeight - chatHeight) / 2}px`;
}
},
toggleDraggable: function() {
if (!this.chatArea) return;
if (this.isDraggable) {
this.disableDraggable();
} else {
this.enableDraggable();
}
// Update button state when toggling
this.updateToggleButton();
},
enableDraggable: function() {
this.isDraggable = true;
localStorage.setItem('isChatAreaDraggable', 'true');
// Initialize draggable for the chat area
$(this.chatArea).draggable({
containment: 'document',
start: function() {
ChatArea.chatArea.classList.add('ui-draggable-enabled');
},
stop: function() {
ChatArea.chatArea.classList.remove('ui-draggable-enabled');
}
});
console.log('Chat area is now draggable.');
},
disableDraggable: function() {
this.isDraggable = false;
localStorage.setItem('isChatAreaDraggable', 'false');
// Destroy draggable functionality
if ($(this.chatArea).draggable('instance')) {
$(this.chatArea).draggable('destroy');
}
console.log('Draggable functionality has been disabled.');
},
updateToggleButton: function() {
const toggleButton = document.querySelector('#toggleChatAreaButton');
if (toggleButton) {
if (this.isDraggable) {
toggleButton.innerText = 'Disable Draggable Chat Area';
toggleButton.style.backgroundColor = '#FF0000'; // Red color when enabled
} else {
toggleButton.innerText = 'Enable Draggable Chat Area';
toggleButton.style.backgroundColor = '#573699'; // Default color when disabled
}
}
}
};
// Initialize the application
MyApp.init();
})();