☰

Reader

一个带遮罩的阅读器

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/450948/1102615/Reader.js 

  1. class Reader {
  2.     constructor(document, id) {
  3.         this.attachedDiv = document.createElement('div');
  4.         this.attachedDiv.id = id;
  5.         document.documentElement.appendChild(this.attachedDiv);
  6.         GM_addStyle(`
  7.             html.ythReaderHTML,html.ythReaderHTML body{overflow: hidden;}
  8.             #${id}{z-index: 99999999999;position: fixed;left: 0;top: 0;}`);
  9.         this.root = this.attachedDiv.attachShadow({ mode: 'open' });
  10.         this.root.innerHTML = `
  11. <style>
  12. #readerWrap{}
  13. #readerWin {
  14. 	position: fixed;
  15. 	width: 600px;
  16.         max-width: 90%;
  17. 	height: 90vh;
  18. 	z-index: 999999;
  19. 	top: 0;
  20. 	right: 0;
  21. 	bottom: 0;
  22. 	left: 0;
  23. 	margin: auto;
  24. }
  25. #reader{
  26.     box-shadow: 1px 1px 3px 3px #333;
  27.     width:100%;
  28.     height:100%;
  29.     font-family: Inter,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  30.     display: flex;
  31.     flex-flow: column;
  32.     text-align: left;
  33. }
  34. #titleBar{
  35.     font-size:12px;
  36.     background-color: #7f7f7f;
  37.     display: flex;
  38.     align-items: center;
  39.     justify-content: space-between;
  40.     color: #000;
  41. }
  42.  
  43. #reader pre {
  44.     font-family: inherit;
  45.     padding:5px;
  46.     font-size:16px;
  47.     height:100%;
  48.     background-color: #ccc;
  49.     overflow-y: scroll;
  50.     white-space: pre-wrap;
  51.     word-wrap: break-word;
  52.     margin: 0px;
  53. }
  54.  
  55. #overlay {
  56.     position: fixed;
  57.     top: 0px;
  58.     left: 0px;
  59.     width: 100%;
  60.     height: 100%;
  61.     background-color: rgba(140,140,125,0.9);
  62.     z-index: 1;
  63. }
  64. #buttons{
  65.     float: right;
  66.     margin: 0px 5px 0px 0px;
  67.     height: 100%;
  68.     display: flex;
  69.     align-items: center;
  70.     flex-shrink: 0;
  71. }
  72. button{
  73.     margin: 0px 0px 0px 5px;
  74.     border: 1px solid #3e7615;
  75.     border-radius: 5px;
  76.     background-color: #b3c2a0;
  77. }
  78. button:hover{
  79.     background-color: #79c819;
  80. }
  81. #title{
  82.     font-size: 18px;
  83.     padding: 0px 0px 0px 10px;
  84.     margin: 0px;
  85.     float: left;
  86.     white-space: nowrap;
  87.     overflow: hidden;
  88.     text-overflow: ellipsis;
  89. }
  90. input{
  91.     padding: 0px;
  92.     width: 19px;
  93.     height: 18px;
  94.     border-radius: 5px;
  95.     border: 1px solid #3e7615;
  96. }
  97. #fontSize,#lineHeight{
  98.     width: 30px;
  99.     font-size: 12px;
  100. }
  101. </style>            
  102. <div id="readerWrap">
  103.     <div id="overlay"></div>
  104.     <div id="readerWin">
  105.         <div id="reader">
  106.             <div id="titleBar">
  107.                 <span id="title">tt</span>
  108.                 <span id="buttons">
  109.                 大小<input type="number" min=12 max=50 id="fontSize" />
  110.                 行距<input type="number" min=12 max=99 id="lineHeight" />
  111.                 文字<input type="color" id="color" />
  112.                 背景<input type="color" id="backgroundColor" />
  113.                 <button id="btn1"></button>
  114.                 <button id="btn2"></button>
  115.                 <button id="closeBtn">✕</button>
  116.                 </span>
  117.             </div>
  118.             <pre></pre>
  119.         </div>
  120.     </div>
  121. </div>
  122.             `
  123.         this.pre = this.root.querySelector('pre');
  124.         this.title = this.root.getElementById('title');
  125.         this.closeBtn = this.root.getElementById('closeBtn');
  126.         this.btn1 = this.root.getElementById('btn1');
  127.         this.btn2 = this.root.getElementById('btn2');
  128.         this.fontSize = this.root.getElementById('fontSize');
  129.         this.fontSize.addEventListener('input', (e) => {
  130.             this.style.fontSize = e.target.value;
  131.             this.pre.style.fontSize = this.style.fontSize + 'px';
  132.             this.saveStyle();
  133.         })
  134.         this.lineHeight = this.root.getElementById('lineHeight');
  135.         this.lineHeight.addEventListener('input', (e) => {
  136.             this.style.lineHeight = e.target.value;
  137.             this.pre.style.lineHeight = this.style.lineHeight + 'px';
  138.             this.saveStyle();
  139.         })
  140.         this.color = this.root.getElementById('color');
  141.         this.color.addEventListener('input', (e) => {
  142.             this.pre.style.color = this.style.color = e.target.value;
  143.             this.saveStyle();
  144.         })
  145.         this.backgroundColor = this.root.getElementById('backgroundColor');
  146.         this.backgroundColor.addEventListener('input', (e) => {
  147.             this.pre.style.backgroundColor = this.style.backgroundColor = e.target.value;
  148.             this.saveStyle();
  149.         })
  150.         this.btn1.style.display = 'none';
  151.         this.btn2.style.display = 'none';
  152.         this.setVisible(false);
  153.         this.closeBtn.addEventListener('click', () => {
  154.             this.setVisible(false);
  155.         })
  156.         this.setStyle();
  157.     }
  158.     setStyle() {
  159.         this.style = GM_getValue('ReaderStyle') || {
  160.             fontSize: 12,
  161.             lineHeight: 20,
  162.             color: "#000000",
  163.             backgroundColor: "#cccccc"
  164.         };
  165.         this.pre.style.fontSize = this.style.fontSize + 'px';
  166.         this.pre.style.lineHeight = this.style.lineHeight + 'px';
  167.         this.pre.style.color = this.style.color;
  168.         this.pre.style.backgroundColor = this.style.backgroundColor;
  169.         this.fontSize.value = this.style.fontSize;
  170.         this.lineHeight.value = this.style.lineHeight;
  171.         this.color.value = this.style.color;
  172.         this.backgroundColor.value = this.style.backgroundColor;
  173.     }
  174.     saveStyle() {
  175.         GM_setValue('ReaderStyle', this.style);
  176.     }
  177.     setVisible(visible) {
  178.         this.visible = visible;
  179.         if (visible) {
  180.             this.attachedDiv.style.display = '';
  181.             document.documentElement.classList.add("ythReaderHTML");
  182.         } else {
  183.             this.attachedDiv.style.display = 'none';
  184.             document.documentElement.classList.remove("ythReaderHTML");
  185.         }
  186.     }
  187.     setReader(text, title, btn1Name, btn1Func, btn2Name, btn2Func) {
  188.         this.pre.textContent = text;
  189.         this.title.textContent = title;
  190.         this.title.title = title;
  191.         this.btn1.style.display = 'none';
  192.         this.btn1.style.display = 'none';
  193.         if (btn1Name && btn1Func) {
  194.             this.btn1.innerText = btn1Name;
  195.             this.btn1.onclick = btn1Func;
  196.             this.btn1.style.display = '';
  197.         }
  198.         if (btn2Name && btn2Func) {
  199.             this.btn2.innerText = btn2Name;
  200.             this.btn2.onclick = btn2Func;
  201.             this.btn2.style.display = '';
  202.         }
  203.         this.setVisible(true);
  204.         this.pre.scrollTo(0, 0);
  205.         return this;
  206.     }
  207. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址