AAC Enhanced plus AAC Utils

AAC Enhanced

Adds custom UI enhancements
目前为 2024-10-05 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         AAC Enhanced
// @namespace    http://tampermonkey.net/
// @version      1.5.1
// @copyright    2024, Asriel(https://gf.qytechs.cn/de/users/1375984-asriel-aac)
// @license      MIT
// @description  Adds custom UI enhancements
// @author       Asriel
// @icon         https://i.ibb.co/z5CJ5zv/revanced.png
// @supportURL   https://gf.qytechs.cn/de/scripts/511351-aac-enhanced/feedback
// @setupURL     https://update.gf.qytechs.cn/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 AACApp = {
        init: function() {
            this.loadModules();
        },

        loadModules: function() {
            TopWrapperIcon.init();
            WallpaperChanger.init();
            ChatArea.init();
        }
    };

    // Top Wrapper Icon Module
    const TopWrapperIcon = {
        init: function() {
            this.addIconToTopWrapper();
        },

        addIconToTopWrapper: function() {
            const topWrapper = document.querySelector('.area');
            if (topWrapper) {
                const iconButton = this.createIconButton();
                iconButton.addEventListener('click', () => Menu.createPlaceholderMenu());
                topWrapper.appendChild(iconButton);
            } else {
                console.warn('[AAC Enhanced] Top wrapper not found. Icon could not be added.');
            }
        },

        createIconButton: function() {
            const iconButton = document.createElement('div');
            iconButton.id = 'aac-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)';

            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);
            return iconButton;
        }
    };

    // Menu Module
    const Menu = {
        createPlaceholderMenu: function() {
            const existingMenu = document.querySelector('#aac-placeholderMenu');
            if (existingMenu) {
                existingMenu.remove();
                return;
            }

            const menu = this.createMenuElement();
            document.body.appendChild(menu);

            ChatArea.updateToggleButton();
            this.updateToggleLeftbarButton();
        },

        createMenuElement: function() {
            const menu = document.createElement('div');
            menu.id = 'aac-placeholderMenu';
            const iconButton = document.querySelector('#aac-topWrapperIcon');
            const iconButtonRect = iconButton.getBoundingClientRect();
            menu.style.position = 'absolute';
            menu.style.top = `${iconButtonRect.bottom + window.scrollY + 10}px`;
            menu.style.left = `${iconButtonRect.left + window.scrollX}px`;
            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 = this.createTitleElement();
            const wallpaperSectionTitle = document.createElement('h4');
            wallpaperSectionTitle.innerText = 'Wallpaper Settings';
            wallpaperSectionTitle.style.marginTop = '20px';
            wallpaperSectionTitle.style.marginBottom = '10px';

            const wallpaperChangerButton = WallpaperChanger.createWallpaperChangerButton();
            const savedWallpapersButton = WallpaperChanger.createSavedWallpapersButton();
            const uiSettingsSectionTitle = document.createElement('h4');
            uiSettingsSectionTitle.innerText = 'UI Settings';
            uiSettingsSectionTitle.style.marginTop = '20px';
            uiSettingsSectionTitle.style.marginBottom = '10px';

            const toggleChatAreaButton = ChatArea.createToggleChatAreaButton();
            const toggleLeftbarButton = this.createToggleLeftbarButton();
            const closeButton = this.createCloseButton();

            menu.appendChild(title);
            menu.appendChild(wallpaperSectionTitle);
            menu.appendChild(wallpaperChangerButton);
            menu.appendChild(document.createElement('br'));
            menu.appendChild(savedWallpapersButton);
            menu.appendChild(document.createElement('br'));
            menu.appendChild(uiSettingsSectionTitle);
            menu.appendChild(toggleChatAreaButton);
            menu.appendChild(document.createElement('br'));
            menu.appendChild(toggleLeftbarButton);
            menu.appendChild(document.createElement('br'));
            menu.appendChild(closeButton);

            return menu;
        },

        createTitleElement: function() {
            const title = document.createElement('h3');
            title.innerText = 'AC-Enhanced Settings';
            title.style.marginBottom = '20px';
            return title;
        },

createToggleLeftbarButton: function() {
    const toggleLeftbarButton = document.createElement('button');
    toggleLeftbarButton.id = 'aac-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());

    return toggleLeftbarButton;
},

createCloseButton: function() {
    const closeButton = document.createElement('button');
    closeButton.innerText = 'Schließen'; // Close -> Schließen
    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', () => {
        const menu = document.querySelector('#aac-placeholderMenu');
        if (menu) menu.remove();
    });

    return closeButton;
},

        toggleLeftbarVisibility: function() {
            const leftbar = document.querySelector('#leftbar');
            const chatBox = document.querySelector('#chatverlaufbox');
            if (!leftbar) return;

            if (leftbar.style.visibility === 'hidden') {
                leftbar.style.transition = 'visibility 0s, opacity 0.5s linear';
                leftbar.style.opacity = '1';
                leftbar.style.visibility = 'visible';
                leftbar.style.pointerEvents = 'auto';
                if (chatBox) chatBox.style.left = '250px'; // Adjust position to align with leftbar visible
                localStorage.setItem('aac-leftbarVisibility', 'visible');
            } else {
                leftbar.style.transition = 'visibility 0s 0.5s, opacity 0.5s linear';
                leftbar.style.opacity = '0';
                leftbar.style.visibility = 'hidden';
                leftbar.style.pointerEvents = 'none';
                if (chatBox) chatBox.style.left = '0'; // Keep consistent position when leftbar is hidden
                localStorage.setItem('aac-leftbarVisibility', 'hidden');
            }

            this.updateToggleLeftbarButton();
        }
    };

    Menu.updateToggleLeftbarButton = function() {
        const toggleLeftbarButton = document.querySelector('#aac-toggleLeftbarButton');
        const leftbarVisible = localStorage.getItem('aac-leftbarVisibility') !== 'hidden';

        if (toggleLeftbarButton) {
            if (leftbarVisible) {
                toggleLeftbarButton.innerText = 'Hide Leftbar';
                toggleLeftbarButton.style.backgroundColor = '#573699';
            } else {
                toggleLeftbarButton.innerText = 'Show Leftbar';
                toggleLeftbarButton.style.backgroundColor = '#FF0000';
            }
        }
    };

    // Initialize the leftbar visibility state on load
    document.addEventListener('DOMContentLoaded', () => {
        sessionStorage.removeItem('aac-wallpaperChanged');
        sessionStorage.removeItem('aac-chatAreaButtonState');
        const leftbar = document.querySelector('#leftbar');
        const chatBox = document.querySelector('#chatverlaufbox');
        const toggleLeftbarButton = document.querySelector('#aac-toggleLeftbarButton');
        if (leftbar) {
            const leftbarVisible = localStorage.getItem('aac-leftbarVisibility') !== 'hidden';
            leftbar.style.transition = 'visibility 0s, opacity 0.5s linear';
            leftbar.style.opacity = leftbarVisible ? '1' : '0';
            leftbar.style.visibility = leftbarVisible ? 'visible' : 'hidden';
            leftbar.style.pointerEvents = leftbarVisible ? 'auto' : 'none';
            if (chatBox) {
                chatBox.style.left = leftbarVisible ? '250px' : '0'; // Ensure consistent positioning for chatbox
            }
            if (toggleLeftbarButton) {
                toggleLeftbarButton.innerText = leftbarVisible ? 'Hide Leftbar' : 'Show Leftbar';
                toggleLeftbarButton.style.backgroundColor = leftbarVisible ? '#573699' : '#FF0000';
            }
        }
        window.onbeforeunload = () => {}; // Disable confirmation popup when reloading the page
    });

    // Wallpaper Changer Module
    const WallpaperChanger = {
        init: function() {
            this.applySavedBackground();
        },

        applySavedBackground: function() {
            const savedImageUrl = localStorage.getItem('aac-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;
                `;
            }
        },

createWallpaperChangerButton: function() {
    const button = document.createElement('button');
    button.innerText = 'Hintergrund ändern'; // Change Wallpaper -> Hintergrund ändern
    button.style.padding = '10px';
    button.style.backgroundColor = '#573699';
    button.style.color = '#fff';
    button.style.border = 'none';
    button.style.borderRadius = '5px';
    button.style.cursor = 'pointer';
    button.style.marginBottom = '10px';

    button.addEventListener('click', () => {
        WallpaperChanger.createInputMenu();
        const menu = document.querySelector('#aac-placeholderMenu');
        if (menu) menu.remove();
    });

    return button;
},

createSavedWallpapersButton: function() {
    const button = document.createElement('button');
    button.innerText = 'Gespeicherte Hintergründe'; // Saved Wallpapers -> Gespeicherte Hintergründe
    button.style.padding = '10px';
    button.style.backgroundColor = '#573699';
    button.style.color = '#fff';
    button.style.border = 'none';
    button.style.borderRadius = '5px';
    button.style.cursor = 'pointer';
    button.style.marginBottom = '10px';

    button.addEventListener('click', () => {
        WallpaperChanger.createSavedWallpapersMenu();
    });

    return button;
},

createSavedWallpapersMenu: 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 title = document.createElement('h3');
    title.innerText = 'Gespeicherte Hintergründe'; // Saved Wallpapers -> Gespeicherte Hintergründe
    title.style.marginBottom = '20px';
    menu.appendChild(title);

    const savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]');
    savedWallpapers.forEach((wallpaper, index) => {
        const wallpaperContainer = document.createElement('div');
        wallpaperContainer.style.display = 'flex';
        wallpaperContainer.style.alignItems = 'center';
        wallpaperContainer.style.marginBottom = '10px';

        const thumbnail = document.createElement('img');
        thumbnail.src = wallpaper.url;
        thumbnail.alt = wallpaper.name || `Wallpaper ${index + 1}`;
        thumbnail.style.width = '50px'; // Set thumbnail width
        thumbnail.style.height = '50px'; // Set thumbnail height
        thumbnail.style.objectFit = 'cover';
        thumbnail.style.borderRadius = '5px';
        thumbnail.style.marginRight = '10px';

        const wallpaperButton = document.createElement('button');
        wallpaperButton.innerText = wallpaper.name || `Wallpaper ${index + 1}`;
        wallpaperButton.style.padding = '10px';
        wallpaperButton.style.backgroundColor = '#573699';
        wallpaperButton.style.color = '#fff';
        wallpaperButton.style.border = 'none';
        wallpaperButton.style.borderRadius = '5px';
        wallpaperButton.style.cursor = 'pointer';
        wallpaperButton.style.marginRight = '5px';
        wallpaperButton.addEventListener('click', () => {
            WallpaperChanger.applyCustomBackground(wallpaper.url);
        });

        const deleteButton = document.createElement('button');
        deleteButton.innerText = '✕';
        deleteButton.style.marginLeft = '5px';
        deleteButton.style.padding = '2px'; // Reduce padding to make it smaller
        deleteButton.style.width = '20px'; // Set specific width
        deleteButton.style.height = '20px'; // Set specific height
        deleteButton.style.backgroundColor = '#FF0000';
        deleteButton.style.color = '#fff';
        deleteButton.style.border = 'none';
        deleteButton.style.borderRadius = '3px';
        deleteButton.style.cursor = 'pointer';
        deleteButton.addEventListener('click', () => {
            WallpaperChanger.deleteWallpaper(index);
            menu.remove();
            WallpaperChanger.createSavedWallpapersMenu();
        });

        wallpaperContainer.appendChild(thumbnail);
        wallpaperContainer.appendChild(wallpaperButton);
        wallpaperContainer.appendChild(deleteButton);
        menu.appendChild(wallpaperContainer);
    });

    const closeButton = document.createElement('button');
    closeButton.innerText = 'Schließen'; // Close -> Schließen
    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);
},

        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 = 'Bild-URL hier eingeben...'; // Enter image URL here...
    input.value = localStorage.getItem('aac-customBackgroundUrl') || '';
    input.style.width = '300px';
    input.style.padding = '10px';
    input.style.marginBottom = '10px';
    input.style.border = '1px solid #ccc';
    input.style.borderRadius = '5px';

    const nameInput = document.createElement('input');
    nameInput.type = 'text';
    nameInput.placeholder = 'Geben Sie den Namen des Hintergrunds ein...'; // Enter wallpaper name...
    nameInput.style.width = '300px';
    nameInput.style.padding = '10px';
    nameInput.style.marginBottom = '10px';
    nameInput.style.border = '1px solid #ccc';
    nameInput.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;
                input.value = imageUrl;
            };
            reader.readAsDataURL(file);
        }
    });

    const applyButton = document.createElement('button');
    applyButton.innerText = 'Hintergrund anwenden'; // Apply Background -> Hintergrund anwenden
    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();
        const wallpaperName = nameInput.value.trim();
        if (imageUrl && wallpaperName) {
            localStorage.setItem('aac-customBackgroundUrl', imageUrl);
            WallpaperChanger.applyCustomBackground(imageUrl);
            sessionStorage.setItem('aac-wallpaperChanged', 'true');
            menu.remove();
        } else {
            alert('Bitte geben Sie eine gültige URL und einen Namen ein.'); // Please enter a valid URL and name.
        }
    });

    const saveButton = document.createElement('button');
    saveButton.innerText = 'Hintergrund speichern'; // Save Wallpaper -> Hintergrund speichern
    saveButton.style.marginTop = '10px';
    saveButton.style.padding = '10px';
    saveButton.style.backgroundColor = '#573699';
    saveButton.style.color = '#fff';
    saveButton.style.border = 'none';
    saveButton.style.borderRadius = '5px';
    saveButton.style.cursor = 'pointer';

    saveButton.addEventListener('click', () => {
        const imageUrl = input.value.trim();
        const wallpaperName = nameInput.value.trim();
        if (imageUrl && wallpaperName) {
            WallpaperChanger.saveWallpaper(imageUrl, wallpaperName);
            alert('Hintergrund erfolgreich gespeichert.'); // Wallpaper saved successfully.
        } else {
            alert('Bitte geben Sie eine gültige URL und einen Namen ein.'); // Please enter a valid URL and name.
        }
    });

    const closeButton = document.createElement('button');
    closeButton.innerText = 'Schließen'; // Close -> Schließen
    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(nameInput);
    menu.appendChild(document.createElement('br'));
    menu.appendChild(fileInput);
    menu.appendChild(applyButton);
    menu.appendChild(document.createElement('br'));
    menu.appendChild(saveButton);
    menu.appendChild(document.createElement('br'));
    menu.appendChild(closeButton);

    document.body.appendChild(menu);
},

        saveWallpaper: function(url, name) {
            let savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]');
            if (!savedWallpapers.some(wallpaper => wallpaper.url === url)) {
                savedWallpapers.push({ url, name });
                localStorage.setItem('aac-savedWallpapers', JSON.stringify(savedWallpapers));
            }
        },

        deleteWallpaper: function(index) {
            let savedWallpapers = JSON.parse(localStorage.getItem('aac-savedWallpapers') || '[]');
            savedWallpapers.splice(index, 1);
            localStorage.setItem('aac-savedWallpapers', JSON.stringify(savedWallpapers));
        }
    };

    // Chat Area Module
    const ChatArea = {
        isDraggable: false,

        init: function() {
            this.chatArea = document.querySelector('#graphicChatArea');
            if (this.chatArea) {
                this.centerChatArea();
                this.chatArea.style.position = 'absolute';

                const savedState = localStorage.getItem('aac-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();
            }

            this.updateToggleButton();
        },

        enableDraggable: function() {
            this.isDraggable = true;
            localStorage.setItem('aac-isChatAreaDraggable', 'true');
            sessionStorage.setItem('aac-chatAreaButtonState', 'true');

            $(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('[AAC Enhanced] Chat area is now draggable.');
        },

        disableDraggable: function() {
            this.isDraggable = false;
            localStorage.setItem('aac-isChatAreaDraggable', 'false');

            if ($(this.chatArea).draggable('instance')) {
                $(this.chatArea).draggable('destroy');
            }

            console.log('[AAC Enhanced] Draggable functionality has been disabled.');
        },

        updateToggleButton: function() {
    const toggleButton = document.querySelector('#aac-toggleChatAreaButton');
    if (toggleButton) {
        if (this.isDraggable) {
            toggleButton.innerText = 'Verschiebbare Chat-Bereich deaktivieren'; // Disable Draggable Chat Area -> Verschiebbare Chat-Bereich deaktivieren
            toggleButton.style.backgroundColor = '#FF0000';
        } else {
            toggleButton.innerText = 'Verschiebbare Chat-Bereich aktivieren'; // Enable Draggable Chat Area -> Verschiebbare Chat-Bereich aktivieren
            toggleButton.style.backgroundColor = '#573699';
        }
    }
},

        createToggleChatAreaButton: function() {
    const button = document.createElement('button');
    button.id = 'aac-toggleChatAreaButton';
    button.style.padding = '10px';
    button.style.color = '#fff';
    button.style.border = 'none';
    button.style.borderRadius = '5px';
    button.style.cursor = 'pointer';
    button.style.marginBottom = '10px';

    button.addEventListener('click', () => ChatArea.toggleDraggable());

    return button;
}
    };

    AACApp.init();
})();
欢迎访问Greasy Fork镜像
