☰

csdn文章全屏阅读

csdn文章全屏阅读，开关在侧边工具栏中

// ==UserScript==
// @name         csdn文章全屏阅读
// @namespace
// @include      *://blog.csdn.net/*/article/details/*
// @version      0.2.1
// @description  csdn文章全屏阅读，开关在侧边工具栏中
// @author       ymzhao
// @namespace 
// @license      MIT
// @grant        GM_addStyle
// ==/UserScript==
GM_addStyle(`
    .blog-content-box.fullscreen {
        overflow: auto;
        padding: 20px max(20px, calc(50% - 600px));
    }
    .blog-content-box {overflow:auto}
    #go-fullscreen {
        font-size: 12px;
        line-height: 14px;
        color: #999aaa;
    }
`)
;
(function() {
	'use strict'

    window.onload = function() {
        const articleDOM = document.querySelector('.blog-content-box')

        const csdnSideToolbar = document.querySelector('.csdn-side-toolbar')
        const fsDOM = document.createElement('a')
        fsDOM.id = 'go-fullscreen'
        fsDOM.className = 'option-box'
        // fsDOM.innerHTML = `<span class="show-txt" style="display:flex;opacity:100;">全屏</span>`
        fsDOM.innerText = '全屏'
        const lastDOM = document.querySelector('.csdn-side-toolbar .option-box[data-type="gotop"]')
        csdnSideToolbar.insertBefore(fsDOM,lastDOM)

        document.getElementById('go-fullscreen').addEventListener('click', function(){
            goToFullScreen(articleDOM)
        })
        articleDOM.addEventListener('fullscreenchange', function() {
            const isArticleFullscreen = document.fullscreenElement === this
            if(!isArticleFullscreen) {
                if(this.classList.contains('fullscreen')) this.classList.remove('fullscreen')
            } else {
                if(!this.classList.contains('fullscreen')) this.classList.add('fullscreen')
            }
        })
    }

    function goToFullScreen(element) {
        element = element || document.body
        if (element.requestFullscreen) element.requestFullscreen()
        else if (element.mozRequestFullScreen) element.mozRequestFullScreen()
        else if (element.msRequestFullscreen) element.msRequestFullscreen()
        else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen()
    }
})();