Expand Code to Fullscreen on StackExchange Site

Toggle fullscreen for code blocks on hover
目前為 2024-05-24 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name          Expand Code to Fullscreen on StackExchange Site
// @namespace    http://tampermonkey.net/
// @author      aspen138
// @version      0.1.3
// @description  Toggle fullscreen for code blocks on hover
// @match      *://*.stackexchange.com/*
// @match          *://*.stackoverflow.com/questions/*
// @match          *://superuser.com/questions/*
// @match          *://meta.superuser.com/questions/*
// @match          *://serverfault.com/questions/*
// @match          *://meta.serverfault.com/questions/*
// @match          *://askubuntu.com/questions/*
// @match          *://meta.askubuntu.com/questions/*
// @match          *://mathoverflow.net/questions/*
// @match          *://meta.mathoverflow.net/questions/*
// @match          *://*.stackexchange.com/questions/*
// @match          *://answers.onstartups.com/questions/*
// @match          *://meta.answers.onstartups.com/questions/*
// @match          *://stackapps.com/questions/*
// @match          *://*.stackoverflow.com/review/*
// @match          *://superuser.com/review/*
// @match          *://meta.superuser.com/review/*
// @match          *://serverfault.com/review/*
// @match          *://meta.serverfault.com/review/*
// @match          *://askubuntu.com/review/*
// @match          *://meta.askubuntu.com/review/*
// @match          *://mathoverflow.net/review/*
// @match          *://meta.mathoverflow.net/review/*
// @match          *://*.stackexchange.com/review/*
// @match          *://answers.onstartups.com/review/*
// @match          *://meta.answers.onstartups.com/review/*
// @match          *://stackapps.com/review/*
// @match          *://*.stackoverflow.com/search*
// @match          *://superuser.com/search*
// @match          *://meta.superuser.com/search*
// @match          *://serverfault.com/search*
// @match          *://meta.serverfault.com/search*
// @match          *://askubuntu.com/search*
// @match          *://meta.askubuntu.com/search*
// @match          *://mathoverflow.net/search*
// @match          *://meta.mathoverflow.net/search*
// @match          *://*.stackexchange.com/search*
// @match          *://answers.onstartups.com/search*
// @match          *://meta.answers.onstartups.com/search*
// @match          *://stackapps.com/search*
// @grant        none
// @license    MIT
// ==/UserScript==
 
 
 
function Toast(msg, duration) {
    let p1 = new Promise((resolve,reject)=>{
        duration = isNaN(duration) ? 3000 : duration;
        var m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText = "font-family:siyuan;max-width:60%;min-width: 150px;padding:0 14px;height: 40px;color: rgb(255, 255, 255);line-height: 40px;text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 16px;";
        document.body.appendChild(m);
        setTimeout(function() {
            var d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function() {
                document.body.removeChild(m)
            }, d * 1000);
        }, duration);
    });
}
 
 
 
(function() {
    'use strict';
 
    // Function to inject styles
    function addStyles() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = `
            .code-wrapper {
                position: relative;
            }
            .button {
                position: absolute;
                top: 0;
                z-index: 10;
                padding: 4px 8px;
                background-color: #eee;
                border: none;
                cursor: pointer;
                border-radius: 4px;
                font-size: 12px;
                display: none;
            }
            .fullscreen-btn {
                right: 0;
            }
            .copy-btn {
                right: 80px; /* Adjust based on the size of the fullscreen button */
            }
            .button:hover {
                background-color: #ddd;
            }
            .code-wrapper:hover .button {
                display: block;
            }
            .code-wrapper.fullscreen {
                background: white;
                color: black;
                width: 100%;
                height: 100%;
                overflow: auto;
                margin: 0;
                padding: 20px;
            }
            .code-wrapper.fullscreen .hljs {
                display: block;
                overflow-x: auto;
                padding: 0.5em;
                color: inherit;
                background: inherit;
            }
        `;
        document.head.appendChild(style);
    }
 
    // Function to toggle fullscreen for the specific code block
    function toggleFullScreen(codeWrapper) {
        if (!document.fullscreenElement && codeWrapper.requestFullscreen) {
            codeWrapper.requestFullscreen().then(() => {
                codeWrapper.classList.add('fullscreen');
                codeWrapper.querySelector('code').classList.forEach(cls => {
                    codeWrapper.classList.add(cls);
                });
            });
        } else if (document.fullscreenElement && document.exitFullscreen) {
            document.exitFullscreen().then(() => {
                codeWrapper.classList.remove('fullscreen');
                codeWrapper.querySelector('code').classList.forEach(cls => {
                    codeWrapper.classList.remove(cls);
                });
            });
        }
    }
 
    // Function to copy code to clipboard
    function copyToClipboard(codeWrapper) {
        const code = codeWrapper.querySelector('code').innerText;
        navigator.clipboard.writeText(code).then(() => {
            console.log('Code copied to clipboard!');
            Toast("Code copied to clipboard!", 100);
 
            // codeWrapper.textContent="Copied";
            // setTimeout( ()=>copyBtn.textContent="Copy", 1*1000);
 
        }).catch(err => {
            console.error('Error copying code to clipboard: ', err);
        });
    }
 
    // Function to create fullscreen and copy buttons for each code block
    function addButtons() {
        document.querySelectorAll('pre code').forEach((code) => {
            let wrapper = code.closest('.code-wrapper');
            if (!wrapper) {
                wrapper = document.createElement('div');
                wrapper.classList.add('code-wrapper');
                code.classList.forEach(cls => {
                    if (cls !== 'hljs') {
                        wrapper.classList.add(cls);
                    }
                });
                code.parentNode.insertBefore(wrapper, code);
                wrapper.appendChild(code);
            }
 
            if (!wrapper.querySelector('.fullscreen-btn')) {
                const fullscreenBtn = document.createElement('button');
                fullscreenBtn.textContent = 'Fullscreen';
                fullscreenBtn.classList.add('fullscreen-btn', 'button');
                fullscreenBtn.addEventListener('click', () => toggleFullScreen(wrapper));
                wrapper.appendChild(fullscreenBtn);
            }
 
            // Add copy button
            if (!wrapper.querySelector('.copy-btn')) {
                const copyBtn = document.createElement('button');
                copyBtn.textContent = 'Copy';
                copyBtn.classList.add('copy-btn', 'button');
                copyBtn.addEventListener('click', () => copyToClipboard(wrapper));
                wrapper.appendChild(copyBtn);
            }
        });
    }
 
    // Wait for the DOM to be fully loaded
    window.addEventListener('load', function() {
        addStyles();
        setTimeout(addButtons, 0);
    });
})();