FIMFiction - Clickable Read Flow

Adds the ability to scroll through a story by clicking on paragraphs

当前为 2020-09-08 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name        FIMFiction - Clickable Read Flow
// @namespace   Selbi
// @include     http*://*fimfiction.net/story/*/*
// @include     http*://*fimfiction.net/chapter/*
// @version     3.1.1
// @grant       none
// @description Adds the ability to scroll through a story by clicking on paragraphs
// ==/UserScript==

(function() {
  "use strict";
  
  // Get elements
  let chapterBody = document.getElementById("chapter-body");
  let paragraphOptionsCloseButton = document.querySelector("#paragraph-options a:last-child");

  // Install scroll event listener when clicking on paragraphs
  const MARGIN_TOP = 20;
  const BOOKMARK_BOX_MARGIN = 80;
  const DOUBLE_CLICK_TOLERANCE = 10;
  fQuery.addScopedEventListener(chapterBody, "p", "click", function() {
    let y = getTargetY(this);
    if (Math.abs(y - window.scrollY) < DOUBLE_CLICK_TOLERANCE) {
      scrollToY(y - BOOKMARK_BOX_MARGIN);
    } else {
      scrollToY(y);
      paragraphOptionsCloseButton.click();      
    }
  });

  function getTargetY(elem) {
    let y = Math.round(elem.getBoundingClientRect().top + window.scrollY - MARGIN_TOP);
    return y;
  }

  function scrollToY(y) {
    window.scrollTo({top: y, behavior: "smooth"});
  }

  // Styling
  function addGlobalStyle(css) {
    let style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    document.getElementsByTagName('head')[0].appendChild(style);
  }

  addGlobalStyle(`
    #chapter-body p:hover {
      cursor: pointer;
      transition: all 200ms ease;
      color: white !important;
    }

    #chapter_toolbar_container {
      padding-bottom: 0px !important;
    }
  `);
})();