☰

Overleaf PDF Viewer Page Numbers

show page numbers in PDF preview panel

  1. // ==UserScript==
  2. // @name              Overleaf PDF Viewer Page Numbers
  3. // @name:zh-CN        Overleaf PDF 预览界面显示页码
  4. // @version           0.1.0
  5. // @description       show page numbers in PDF preview panel
  6. // @description:zh-cn 在 Overleaf 的 PDF 预览界面中显示页码
  7. // @author            wanng
  8. // @match             https://www.overleaf.com/project/*
  9. // @icon              https://www.overleaf.com/favicon.ico
  10. // @grant             none
  11. // @license           MIT
  12. // @namespace https://greasyfork.org/users/326819
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     'use strict';
  17.     // 设置一个标志来指示按钮是否已添加
  18.     let btnAdded = false;
  19.     let totalLenBtnAdded = false; // 新增标志来指示总页数按钮是否已添加
  20.  
  21.     const id = setInterval(() => {
  22.         // 只有在两个按钮均未添加时才尝试添加按钮
  23.         if (!btnAdded || !totalLenBtnAdded) {
  24.             const btns = document.querySelector('.pdfjs-controls .btn-group');
  25.             if (btns) {
  26.                 if (!btnAdded) {
  27.                     const btn = btns.lastElementChild.cloneNode(true); // 克隆最后一个按钮
  28.                     btn.href = '#';
  29.                     btn.innerText = '...'; // 初始文本
  30.  
  31.                     // 添加点击事件监听器
  32.                     btn.onclick = () => {
  33.                         // 在按钮点击时重新查询页面元素
  34.                         const pages = document.querySelectorAll('.pdfjs-viewer-inner .pdfViewer .page');
  35.                         const total_len = pages.length; // 获取总页数
  36.                         if (total_len === 0) {
  37.                             btn.innerText = '...'; // 如果没有找到页面，显示Loading...
  38.                             console.log('Attempting to reload pages...');
  39.                             setTimeout(btn.onclick, 10); // 延迟重试
  40.                             return; // 退出函数
  41.                         }
  42.  
  43.                         for (let i = 0; i < pages.length; ++i) {
  44.                             if (isInViewport(pages[i])) {
  45.                                 btn.innerText = `${i + 1}`; // 更新按钮文本为当前页数/总页数
  46.                                 break;
  47.                             }
  48.                         }
  49.                     };
  50.  
  51.                     btns.appendChild(btn); // 将新按钮添加到按钮组中
  52.                     btnAdded = true; // 标记按钮已添加
  53.                     btn.onclick(); // 立即触发一次点击事件以更新按钮文本
  54.                 }
  55.  
  56.                 if (!totalLenBtnAdded) {
  57.                     const totalLenBtn = btns.lastElementChild.cloneNode(true); // 再次克隆最后一个按钮
  58.                     totalLenBtn.href = '#';
  59.                     totalLenBtn.innerText = 'total'; // 初始文本
  60.  
  61.                     // 修改此按钮的点击事件仅显示总页数
  62.                     totalLenBtn.onclick = () => {
  63.                         const pages = document.querySelectorAll('.pdfjs-viewer-inner .pdfViewer .page');
  64.                         totalLenBtn.innerText = `${pages.length}`; // 更新按钮文本显示总页数
  65.                     };
  66.  
  67.                     btns.appendChild(totalLenBtn); // 将总页数按钮添加到按钮组中
  68.                     totalLenBtnAdded = true; // 标记总页数按钮已添加
  69.                     totalLenBtn.onclick(); // 立即触发一次点击事件以更新按钮文本
  70.                 }
  71.             }
  72.         }
  73.     }, 5); // 每1000毫秒检查一次，直到成功添加按钮
  74.  
  75.     // 定义一个函数来检查元素是否在视口中
  76.     function isInViewport(element) {
  77.         const rect = element.getBoundingClientRect();
  78.         return (
  79.             rect.top >= 0 &&
  80.             rect.left >= 0 &&
  81.             rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
  82.             rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  83.         );
  84.     }
  85. })();