AnnaniZhu's script

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

当前为 2020-03-07 提交的版本,查看 最新版本

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