6BibleVersions-helper

Adds a class to html if bible.com is in an iframe. Adjusts font size of parallel versions to fit the left column.

当前为 2025-05-15 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name 6BibleVersions-helper
  3. // @namespace Violentmonkey Scripts
  4. // @match https://www.bible.com/*
  5. // @grant none
  6. // @version 1.5
  7. // @author Aiuanyu x Gemini
  8. // @description Adds a class to html if bible.com is in an iframe. Adjusts font size of parallel versions to fit the left column.
  9. // @description:zh-TW 當 bible.com 在 iframe 裡時,給 <html> 加個 class。調整並列版本个字體大小,讓佇左邊个欄位內看起來較好。
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. if (window.self !== window.top) {
  16. document.documentElement.classList.add('is-in-iframe');
  17. console.log('Bible.com is in an iframe, added class "is-in-iframe" to <html>');
  18.  
  19. // 當 iframe 內容載入完成後,嘗試調整並列版本个字體大小
  20. window.addEventListener('load', function () {
  21. // 等待所有字體載入完成
  22. document.fonts.ready.then(function () {
  23. console.log('All fonts loaded, attempting to adjust font size.');
  24. adjustParallelFontSize();
  25. }).catch(function (error) {
  26. console.warn('Font loading error or timeout, proceeding with font adjustment anyway:', error);
  27. adjustParallelFontSize(); // 若字體載入失敗或超時,還是嘗試執行
  28. });
  29. });
  30.  
  31. } else {
  32. console.log('Bible.com is top level window.');
  33. }
  34.  
  35. function adjustParallelFontSize() {
  36. try {
  37. const params = new URLSearchParams(window.location.search);
  38. const parallelVersionId = params.get('parallel');
  39.  
  40. if (!parallelVersionId) {
  41. console.log('No parallel version ID found in URL, skipping font adjustment.');
  42. return;
  43. }
  44.  
  45. // 取得左欄主要版本个 ID
  46. const pathSegments = window.location.pathname.match(/\/bible\/(\d+)\//);
  47. if (!pathSegments || !pathSegments[1]) {
  48. console.log('Could not extract main version ID from path, skipping font adjustment.');
  49. return;
  50. }
  51. const mainVersionId = pathSegments[1];
  52.  
  53. const leftDataVidSelector = `[data-vid="${mainVersionId}"]`;
  54. const rightDataVidSelector = `[data-vid="${parallelVersionId}"]`;
  55.  
  56. console.log('Attempting to adjust font for right column selector:', rightDataVidSelector, 'against left column selector:', leftDataVidSelector);
  57.  
  58. // 找出並列閱讀个主要容器 (根據先前个 HTML 結構)
  59. // 這選擇器可能愛根據 bible.com 實際个 HTML 結構微調
  60. // 你个 CSS userstyle 用 div.grid.grid-cols-1.md\:grid-cols-2,所以𠊎等也用共樣个
  61. const parallelContainer = document.querySelector('div.grid.md\\:grid-cols-2, div.grid.grid-cols-1.md\\:grid-cols-2');
  62. if (!parallelContainer) {
  63. // 嘗試一個較通用个選擇器,假使上面該隻無效
  64. // parallelContainer = document.querySelector('div[class*="md:grid-cols-2"]'); // 這較闊,可能愛小心
  65. // if (!parallelContainer) {
  66. console.log('Parallel container (e.g., div.grid.md:grid-cols-2) not found.');
  67. return;
  68. }
  69.  
  70. const columns = Array.from(parallelContainer.children).filter(el => getComputedStyle(el).display !== 'none');
  71. if (columns.length < 2) {
  72. console.log('Less than two visible columns found in parallel container.');
  73. return;
  74. }
  75.  
  76. const leftColumnEl = columns[0];
  77. const rightColumnEl = columns[1];
  78.  
  79. // 在左欄裡肚尋找主要版本个內容元素 (使用 data-vid)
  80. const leftVersionDiv = leftColumnEl.querySelector(leftDataVidSelector);
  81. if (!leftVersionDiv) {
  82. console.log(`Content div for left version (${leftDataVidSelector}) not found in the left column.`);
  83. return;
  84. }
  85.  
  86. // 在右欄裡肚尋找並列版本个內容元素 (使用 data-vid)
  87. // 這也是等一下要調整字體大小的目標元素
  88. const rightVersionDiv = rightColumnEl.querySelector(rightDataVidSelector);
  89. if (!rightVersionDiv) {
  90. console.log(`Content div for right version (${rightDataVidSelector}) not found in the right column.`);
  91. return;
  92. }
  93.  
  94. console.log('Found leftVersionDiv:', leftVersionDiv, 'Found rightVersionDiv:', rightVersionDiv);
  95.  
  96. // 使用 requestAnimationFrame 來確保 DOM 操作和測量是在瀏覽器準備好繪製下一幀之前進行
  97. requestAnimationFrame(() => {
  98. // 開始調整字體
  99. rightVersionDiv.style.fontSize = '90%'; // 初始字體大小
  100.  
  101. // 強制瀏覽器重繪以取得正確个初始高度
  102. leftVersionDiv.offsetHeight;
  103. rightVersionDiv.offsetHeight;
  104.  
  105. let leftHeight = leftVersionDiv.offsetHeight;
  106. let rightHeight = rightVersionDiv.offsetHeight;
  107.  
  108. if (rightHeight <= leftHeight) {
  109. console.log(rightDataVidSelector + ' content in right column is fine at 90% (or already shorter/equal). Right content: ' + rightHeight + 'px, Left content: ' + leftHeight + 'px');
  110. return;
  111. }
  112.  
  113. let lastKnownTallerFontSize = 90;
  114.  
  115. for (let testSize = 89; testSize >= 50; testSize--) { // 最細到 50%
  116. rightVersionDiv.style.fontSize = testSize + '%';
  117. // 每次改變字體大小後,重新獲取高度
  118. // 這裡的 rightVersionDiv.offsetHeight 會強制 reflow
  119. rightHeight = rightVersionDiv.offsetHeight;
  120. // leftHeight 在這個循環中假定不變,因為我們只調整右邊的字體
  121.  
  122. if (rightHeight > leftHeight) {
  123. lastKnownTallerFontSize = testSize;
  124. } else {
  125. // 右邊內容開始比左邊短,或者一樣高了,就用上一個較大的字體大小
  126. rightVersionDiv.style.fontSize = lastKnownTallerFontSize + '%';
  127. console.log('Adjusted ' + rightDataVidSelector + ' font size to ' + lastKnownTallerFontSize + '%. Right content: ' + rightVersionDiv.offsetHeight + 'px, Left content: ' + leftHeight + 'px');
  128. return;
  129. }
  130. }
  131.  
  132. // 如果循環結束(字體縮到最小還是右邊較長),就用最後記錄的大小
  133. rightVersionDiv.style.fontSize = lastKnownTallerFontSize + '%';
  134. console.log('Adjusted ' + rightDataVidSelector + ' font size to ' + lastKnownTallerFontSize + '% (min reached or still taller). Right content: ' + rightVersionDiv.offsetHeight + 'px, Left content: ' + leftHeight + 'px');
  135. });
  136. } catch (error) {
  137. console.error('Error during font adjustment:', error);
  138. }
  139. }
  140. })();