☰

Bible.com iframe specific styles

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

当前为 2025-05-17 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Bible.com iframe specific styles
  3. // @namespace   Violentmonkey Scripts
  4. // @match       *://www.bible.com/*
  5. // @grant       none
  6. // @version     1.8
  7. // 改善字體大細个調整成功率
  8. // @author      Aiuanyu x Gemini
  9. // @description Adds a class to html if bible.com is in an iframe. Adjusts font size of parallel versions to fit the left column. Accepts parent scrolling messages.
  10. // @description:zh-TW 當 bible.com 在 iframe 裡時，給 <html> 加個 class。調整並列版本个字體大小，讓佇左邊个欄位內看起來較好。接受上層網頁共下捲動个命令。
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     if (window.self !== window.top) {
  17.         document.documentElement.classList.add('is-in-iframe');
  18.         console.log('Bible.com is in an iframe, added class "is-in-iframe" to <html>');
  19.  
  20.         // 當 iframe 內容載入完成後，嘗試調整並列版本个字體大小
  21.         window.addEventListener('load', function () {
  22.             // 等待所有字體載入完成 (e.g., web fonts used by bible.com itself)
  23.             document.fonts.ready.then(function () {
  24.                 // Add a small delay AFTER fonts are ready and page is loaded,
  25.                 // to give bible.com's own scripts more time to render dynamic content
  26.                 // before we start measuring heights.
  27.                 const initialAdjustmentDelay = 1500; // 1.5 秒鐘
  28.                 console.log(`All fonts loaded. Waiting ${initialAdjustmentDelay}ms before attempting font adjustment.`);
  29.                 setTimeout(function() {
  30.                     adjustParallelFontSize();
  31.                 }, initialAdjustmentDelay);
  32.             }).catch(function (error) {
  33.                 console.warn('Font loading error or timeout, proceeding with font adjustment anyway:', error);
  34.                 setTimeout(function() { adjustParallelFontSize(); }, 1500); // 若有錯誤，也延遲一息仔再試
  35.             });
  36.         });
  37.         
  38.         // 監聽來自父視窗 (index.html) 的訊息
  39.         window.addEventListener('message', function(event) {
  40.             // 為著安全，可以檢查訊息來源 event.origin
  41.             // 但因為 index.html 可能係 file:// 協定，event.origin 會係 'null'
  42.             // 所以，檢查 event.source 是不是 window.top 會較穩當
  43.             if (event.source !== window.top) {
  44.                 // console.log('Userscript: Message ignored, not from top window.');
  45.                 return;
  46.             }
  47.  
  48.             if (event.data && event.data.type === 'SYNC_SCROLL_TO_PERCENTAGE') {
  49.                 const percentage = parseFloat(event.data.percentage);
  50.                 if (isNaN(percentage) || percentage < 0 || percentage > 1) {
  51.                     console.warn('Userscript: Invalid scroll percentage received:', event.data.percentage);
  52.                     return;
  53.                 }
  54.  
  55.                 const de = document.documentElement;
  56.                 const scrollableDistance = de.scrollHeight - de.clientHeight;
  57.  
  58.                 if (scrollableDistance <= 0) {
  59.                     // console.log('Userscript: Content is not scrollable.');
  60.                     return; // 內容毋使捲動
  61.                 }
  62.  
  63.                 const scrollToY = scrollableDistance * percentage;
  64.                 // console.log(`Userscript: Scrolling to ${percentage*100}%, ${scrollToY}px. Scrollable: ${scrollableDistance}, Total: ${de.scrollHeight}, Visible: ${de.clientHeight}`);
  65.                 window.scrollTo({ top: scrollToY, behavior: 'auto' }); // 'auto' 表示立即捲動
  66.             }
  67.         });
  68.  
  69.     } else {
  70.         console.log('Bible.com is top level window.');
  71.     }
  72.     function adjustParallelFontSize(retryAttempt = 0) {
  73.         const MAX_RETRIES = 10; // 增加重試次數
  74.         const RETRY_DELAY = 1200; // 每次重試之間等 1.2 秒鐘
  75.         const MIN_COLUMN_HEIGHT_THRESHOLD = 50; // px, 用來判斷內容敢有顯示出來个基本高度
  76.  
  77.         try { // try...catch 包住整個函數个內容
  78.             const params = new URLSearchParams(window.location.search);
  79.             const parallelVersionId = params.get('parallel');
  80.  
  81.             if (!parallelVersionId) {
  82.                 console.log('No parallel version ID found in URL, skipping font adjustment.');
  83.                 return;
  84.             }
  85.  
  86.             // 取得左欄主要版本个 ID
  87.             const pathSegments = window.location.pathname.match(/\/bible\/(\d+)\//);
  88.             if (!pathSegments || !pathSegments[1]) {
  89.                 console.log('Could not extract main version ID from path, skipping font adjustment.');
  90.                 return;
  91.             }
  92.             const mainVersionId = pathSegments[1];
  93.  
  94.             const leftDataVidSelector = `[data-vid="${mainVersionId}"]`;
  95.             const rightDataVidSelector = `[data-vid="${parallelVersionId}"]`;
  96.  
  97.             // 找出並列閱讀个主要容器 (根據先前个 HTML 結構)
  98.             const parallelContainer = document.querySelector('div.grid.md\\:grid-cols-2, div.grid.grid-cols-1.md\\:grid-cols-2');
  99.             if (!parallelContainer) {
  100.                 console.log('Parallel container (e.g., div.grid.md:grid-cols-2) not found.');
  101.                 return;
  102.             }
  103.  
  104.             const columns = Array.from(parallelContainer.children).filter(el => getComputedStyle(el).display !== 'none');
  105.             if (columns.length < 2) {
  106.                 console.log('Less than two visible columns found in parallel container.');
  107.                 return;
  108.             }
  109.  
  110.             const leftColumnEl = columns[0];
  111.             const rightColumnEl = columns[1];
  112.  
  113.             const leftVersionDiv = leftColumnEl.querySelector(leftDataVidSelector);
  114.             const rightVersionDiv = rightColumnEl.querySelector(rightDataVidSelector);
  115.  
  116.             if (!leftVersionDiv || !rightVersionDiv) {
  117.                 console.log(`Content div for left (${leftDataVidSelector}) or right (${rightDataVidSelector}) not found.`);
  118.                 if (retryAttempt < MAX_RETRIES -1) { // 為元素搜尋保留一些重試次數
  119.                     console.warn(`Retrying element search in ${RETRY_DELAY}ms (Attempt ${retryAttempt + 1}/${MAX_RETRIES})`);
  120.                     setTimeout(() => adjustParallelFontSize(retryAttempt + 1), RETRY_DELAY);
  121.                 } else {
  122.                     console.error('Element search failed after max retries for content divs. Aborting font adjustment.');
  123.                 }
  124.                 return; // 若元素無尋到，愛 return 避免錯誤
  125.             }
  126.  
  127.             // At this point, elements are found. Now check if they have rendered content.
  128.             // Force reflow before measurement
  129.             leftVersionDiv.offsetHeight;
  130.             rightVersionDiv.offsetHeight; // Ensure reflow before measurement
  131.             const currentLeftHeight = leftVersionDiv.offsetHeight;
  132.  
  133.             if (currentLeftHeight < MIN_COLUMN_HEIGHT_THRESHOLD && retryAttempt < MAX_RETRIES) { // 若左欄高度無夠
  134.                 console.warn(`Left column height (${currentLeftHeight}px) is less than threshold (${MIN_COLUMN_HEIGHT_THRESHOLD}px). Content might not be fully rendered. Retrying in ${RETRY_DELAY}ms (Attempt ${retryAttempt + 1}/${MAX_RETRIES})`);
  135.                 setTimeout(() => adjustParallelFontSize(retryAttempt + 1), RETRY_DELAY);
  136.                 return;
  137.             }
  138.             if (currentLeftHeight < MIN_COLUMN_HEIGHT_THRESHOLD && retryAttempt >= MAX_RETRIES) { // 重試了後還係無夠高
  139.                 console.error(`Left column height (${currentLeftHeight}px) remains below threshold after ${MAX_RETRIES} retries. Aborting font adjustment.`);
  140.                 return; // 放棄調整
  141.             }
  142.  
  143.             console.log('Found leftVersionDiv:', leftVersionDiv, 'Found rightVersionDiv:', rightVersionDiv);
  144.  
  145.             // 使用 requestAnimationFrame 來確保 DOM 操作和測量是在瀏覽器準備好繪製下一幀之前進行
  146.             // If we reach here, elements are found and left column has some content.
  147.             requestAnimationFrame(() => {
  148.                 // 開始調整字體
  149.                 let currentFontSize = 90; // 初始字體大小
  150.                 rightVersionDiv.style.fontSize = currentFontSize + '%';
  151.  
  152.                 // The leftHeight from *before* rAF (currentLeftHeight) should be the reference.
  153.                 let leftHeight = currentLeftHeight;
  154.                 // Ensure right column also reflows with its new font size
  155.                 let rightHeight = rightVersionDiv.offsetHeight; // 獲取初始高度
  156.  
  157.                 console.log(`Initial check at ${currentFontSize}%: Right height ${rightHeight}px, Left height ${leftHeight}px (reference)`);
  158.  
  159.                 // 如果初始字體大小就已經讓右邊內容不比左邊長，就不用調整了
  160.                 if (rightHeight <= leftHeight) {
  161.                     console.log('Initial font size ' + currentFontSize + '% is sufficient or shorter.');
  162.                     return;
  163.                 }
  164.  
  165.                 // 如果初始字體大小讓右邊內容比左邊長，就開始縮小字體
  166.                 // 預設使用最小个測試字體 (50%)，假使所有測試過个字體都還係分右邊太長。
  167.                 let bestFitFontSize = 50;
  168.                 let foundOptimalAdjustment = false;
  169.  
  170.                 for (let testSize = currentFontSize - 1; testSize >= 50; testSize--) { // 從比初始值小1%開始，最細到 50%
  171.                     rightVersionDiv.style.fontSize = testSize + '%';
  172.                     rightHeight = rightVersionDiv.offsetHeight; // 每次改變字體大小後，重新獲取高度 (強制 reflow)
  173.  
  174.                     if (rightHeight > leftHeight) {
  175.                         // 這隻 testSize 還係分右邊太長，繼續試較細个字體。
  176.                         // 假使這係迴圈最後一次 (testSize == 50) 而且還係太長，
  177.                         // bestFitFontSize 會維持在 50%。
  178.                     } else {
  179.                         // 這隻 testSize 分右邊內容變到毋比左邊長了 (<=)。
  180.                         // 照你个要求，𠊎等愛用前一隻字體大細 (testSize + 1)，
  181.                         // 因為該隻字體大細會分右邊「略略仔長過左邊」。
  182.                         bestFitFontSize = testSize + 1;
  183.                         foundOptimalAdjustment = true;
  184.                         console.log(`Right content became shorter/equal at ${testSize}% (height ${rightHeight}px). Applying previous size ${bestFitFontSize}% which was slightly taller.`);
  185.                         break; // 尋到臨界點了，跳出迴圈
  186.                     }
  187.                 }
  188.  
  189.                 if (!foundOptimalAdjustment && currentFontSize > 50) {
  190.                     // 假使迴圈跑完，foundOptimalAdjustment 還係 false，
  191.                     // 表示從 (currentFontSize - 1) 到 50% 所有字體都還係分右邊太長。
  192.                     // 在這情況下，bestFitFontSize 已經係 50%。
  193.                     console.log(`All tested font sizes from ${currentFontSize - 1}% down to 50% still made right content taller. Using smallest tested size: 50%.`);
  194.                 }
  195.  
  196.                 // 迴圈結束後，將字體設定為決定好个大小
  197.                 rightVersionDiv.style.fontSize = bestFitFontSize + '%';
  198.                 // 為著準確記錄最終狀態，重新量一次高度
  199.                 const finalRightHeight = rightVersionDiv.offsetHeight;
  200.                 console.log('Final adjusted font size for ' + rightDataVidSelector + ' is ' + bestFitFontSize + '%. Final Right content: ' + finalRightHeight + 'px, Left content: ' + leftHeight + 'px');
  201.             });
  202.         } catch (error) {
  203.             console.error('Error during font adjustment:', error);
  204.         }
  205.     }
  206. })();