☰

AnnaniZhu's script

优化部分网页(node 文档 api 导航固定、掘金文章目录固定...)的交互体验

当前为 2019-10-23 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         AnnaniZhu's script
  3. // @namespace    http://tampermonkey.net/Annani
  4. // @version      0.1.0
  5. // @description  优化部分网页(node 文档 api 导航固定、掘金文章目录固定...)的交互体验
  6. // @author       AnnaniZhu
  7. // @create       2019-10-23
  8. // @run-at       document-idle
  9. // @include      *://nodejs.cn/api/*
  10. // @include      *://juejin.im/post/*
  11. // @require      https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
  12. // @grant        GM_addStyle
  13. // ==/UserScript==
  14.  
  15. (function () {
  16.   'use strict'
  17.   /* eslint-disable-next-line */
  18.   const { href: URL, host: HOST } = window.location
  19.  
  20.   const DOMAIN_SCRIPT_MAP = {
  21.     'nodejs.cn': createNodeSideMenu,
  22.     'juejin.im': fixeJueJindCategory
  23.   }
  24.  
  25.   // 注入通用样式
  26.   addCommonStyle()
  27.  
  28.   Object.keys(DOMAIN_SCRIPT_MAP).forEach(key => {
  29.     if (new RegExp(key).test(HOST)) {
  30.       DOMAIN_SCRIPT_MAP[key]()
  31.     }
  32.   })
  33.  
  34.   // node
  35.   function createNodeSideMenu () {
  36.     const sideMenu = document.createElement('div')
  37.     const toggle = document.createElement('div')
  38.     sideMenu.id = 'side_menu__nodejs'
  39.     toggle.id = 'side_menu_toggle'
  40.     const $toc = $('#toc')
  41.     $toc.addClass('scroll-view')
  42.     sideMenu.appendChild(toggle)
  43.     sideMenu.appendChild($('#toc')[0])
  44.  
  45.     function toggleSideMenu () {
  46.       $(sideMenu).toggleClass('open')
  47.     }
  48.  
  49.     // 点击按钮或按 ESC 切换侧边栏显隐
  50.     $(toggle).click(toggleSideMenu)
  51.     $(document).keydown((e) => {
  52.       if (e.key === 'Escape') {
  53.         toggleSideMenu()
  54.       }
  55.     })
  56.  
  57.     GM_addStyle(`
  58.       #side_menu__nodejs {
  59.         position: fixed;
  60.         top: 0;
  61.         right: 0;
  62.         width: 20%;
  63.         min-width: 250px;
  64.         transform: translateX(100%);
  65.         transition: transform .15s;
  66.       }
  67.  
  68.       #side_menu__nodejs.open {
  69.         transform: translateX(0%);
  70.       }
  71.  
  72.       #side_menu_toggle {
  73.         position: absolute;
  74.         left: -40px;
  75.         top: 100px;
  76.         padding: 20px;
  77.         border-radius: 50%;
  78.         color: #fff;
  79.         background-color: rgba(113, 199, 173, 0.7);
  80.         cursor: pointer;
  81.         transform: translateX(-100%);
  82.         transition: all 0.2s;
  83.         animation: halo 2s 0s ease-out infinite;
  84.       }
  85.  
  86.       @keyframes halo {
  87.         0% {
  88.           box-shadow: 0 0 2px 10px rgba(113, 199, 173, 0.7);
  89.         }
  90.  
  91.         10% {
  92.           box-shadow: 0 0 2px 10px rgb(113, 199, 173);
  93.         }
  94.  
  95.         100% {
  96.           box-shadow: 0 0 2px 40px rgba(113, 199, 173, 0.1);
  97.         }
  98.       }
  99.  
  100.       #toc {
  101.         box-sizing: border-box;
  102.         height: 100vh;
  103.         padding: 16px 0 24px 0;
  104.         overflow-y: auto;
  105.         color: #fff;
  106.         background-color: #333;
  107.       }
  108.  
  109.       #toc h2,
  110.       #toc url {
  111.         margin: 0;
  112.       }
  113.  
  114.       #toc h2 {
  115.         font-size: 16px;
  116.         text-align: center;
  117.         margin-bottom: 8px;
  118.       }
  119.  
  120.       #toc a {
  121.         color: #ccc;
  122.       }
  123.  
  124.       #toc a:hover {
  125.         color: #fff;
  126.       }
  127.     `)
  128.  
  129.     document.body.appendChild(sideMenu)
  130.   }
  131.  
  132.   // 掘金
  133.   function fixeJueJindCategory () {
  134.     // dom 延迟加载
  135.     setTimeout(() => {
  136.       $('.sticky-block-box').addClass('scroll-view')
  137.     }, 300)
  138.     GM_addStyle(`
  139.     .scroll-view.sticky-block-box {
  140.        position: fixed;
  141.        left: 24px;
  142.        top: 80px;
  143.        bottom: 20px;
  144.        width: 300px !important;
  145.        margin: auto;
  146.        z-index: 1000;
  147.     }
  148.     `)
  149.   }
  150.  
  151.   function addCommonStyle () {
  152.     GM_addStyle(`
  153.     .scroll-view {
  154.        overflow-y: auto;
  155.     }
  156.     .scroll-view::-webkit-scrollbar {
  157.       width: 6px;
  158.     }
  159.     .scroll-view::-webkit-scrollbar-track {
  160.       box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  161.       border-radius: 10px;
  162.     }
  163.     .scroll-view::-webkit-scrollbar-thumb {
  164.       border-radius: 10px;
  165.       background: rgba(0,0,0,0.1);
  166.       box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  167.     }
  168.     .scroll-view::-webkit-scrollbar-thumb:window-inactive {
  169.       background: rgba(255,0,0,0.4);
  170.     }
  171.     `)
  172.   }
  173. })()