Expand Code to Fullscreen on StackExchange Site | pressku.com

2 months ago

Description

Script practice.

Toggle Fullscreen connected Hover: When users hover complete a codification block, a 'Fullscreen' fastener appears. Clicking this fastener will grow nan codification artifact to capable nan full screen, facilitating easier reference and study of nan codification without distractions from different page content.
Clean Exit from Fullscreen: When nan personification exits fullscreen mode, nan codification artifact returns to its original authorities without immoderate leftover styling aliases people changes, ensuring nan page remains arsenic it was earlier nan script's interaction.

Code

// ==UserScript== // @name Expand Code to Fullscreen connected StackExchange Site // @namespace http://tampermonkey.net/ // @author aspen138 // @version 0.1 // @description Toggle fullscreen for codification blocks connected hover // @match *://*.stackexchange.com/* // @grant none // @license MIT // ==/UserScript== (function() { 'use strict'; // Function to inject styles usability addStyles() { const style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = ` .code-wrapper { position: relative; } .fullscreen-btn { position: absolute; top: 0; right: 0; z-index: 10; padding: 4px 8px; background-color: #eee; border: none; cursor: pointer; border-radius: 4px; font-size: 12px; display: none; } .fullscreen-btn:hover { background-color: #ddd; } .code-wrapper:hover .fullscreen-btn { display: block; } /* Fullscreen circumstantial styles */ .code-wrapper.fullscreen { background: white; /* Change this to nan desired inheritance colour */ color: black; /* And this to nan desired matter colour */ width: 100%; height: 100%; overflow: auto; /* This allows scrolling */ margin: 0; padding: 20px; /* Or nevertheless overmuch padding you want */ } /* Ensure syntax highlighting styles person capable specificity */ .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 nan circumstantial codification block usability toggleFullScreen(codeWrapper) { if (!document.fullscreenElement && codeWrapper.requestFullscreen) { codeWrapper.requestFullscreen().then(() => { codeWrapper.classList.add('fullscreen'); // Copy each classes from <code> to nan wrapper codeWrapper.querySelector('code').classList.forEach(cls => { codeWrapper.classList.add(cls); }); }); } other if (document.fullscreenElement && document.exitFullscreen) { document.exitFullscreen().then(() => { codeWrapper.classList.remove('fullscreen'); // Remove nan copied classes from nan wrapper codeWrapper.querySelector('code').classList.forEach(cls => { codeWrapper.classList.remove(cls); }); }); } } // Function to create a fullscreen fastener for each codification block usability addFullscreenButtons() { document.querySelectorAll('pre code').forEach((code) => { // Check if nan codification artifact is already wrapped pinch nan code-wrapper fto wrapper = code.closest('.code-wrapper'); if (!wrapper) { wrapper = document.createElement('div'); wrapper.classList.add('code-wrapper'); // Move nan classes from <code> to nan wrapper code.classList.forEach(cls => { if (cls !== 'hljs') { // Avoid moving nan 'hljs' class wrapper.classList.add(cls); } }); code.parentNode.insertBefore(wrapper, code); wrapper.appendChild(code); } // Create and append nan fullscreen fastener if not already there if (!wrapper.querySelector('.fullscreen-btn')) { const btn = document.createElement('button'); btn.textContent = 'Fullscreen'; btn.classList.add('fullscreen-btn'); btn.addEventListener('click', () => toggleFullScreen(wrapper)); wrapper.appendChild(btn); } }); } // Wait for nan DOM to beryllium afloat loaded window.addEventListener('load', function() { addStyles(); // Call addFullscreenButtons pinch a hold to let syntax highlighting to process setTimeout(addFullscreenButtons, 0); }); })();