笔记列表跟随当前章节滚动
目前為
// ==UserScript==
// @name 微信读书笔记列表跟随当前章节滚动
// @namespace http://tampermonkey.net/
// @version 0.4.6
// @description 笔记列表跟随当前章节滚动
// @author XQH
// @match https://weread.qq.com/web/reader/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=qq.com
// @grant none
// @license MIT
// ==/UserScript==
(function () {
'use strict';
let noteListCssSelector = 'readerNoteList'
let noteItemClz = 'sectionListItem_title'
// 保存点击的上一个笔记
let lastNote = null;
// 笔记面板
let notePanel = document.getElementsByClassName("readerNotePanel")[0];
// 等待页面加载完毕
setTimeout(function () {
// 获取网页标题 css:.readerTopBar_title_chapter
let title = document.querySelector(".readerTopBar_title_chapter");
function jumpNote() {
// 获取title文字，查找noteList中div(class:noteItemClz)子标签文字对应标签
let titleText = title.innerText;
let noteList = document.getElementsByClassName(noteListCssSelector)[0];
let noteItems = noteList.getElementsByClassName(noteItemClz);
for (let i = 0; i < noteItems.length; i++) {
if (noteItems[i].innerText == titleText) {
noteList.scrollTop = noteItems[i].offsetTop - 100;
break;
}
}
// 如果保存了上一个笔记
if (lastNote) {
// 滚动到笔记位置
noteList.scrollTop = lastNote.offsetTop - 100;
}
}
// 定时隐藏推广按钮
setInterval(function () {
// 隐藏推广按钮
let appDownloadBtn = document.querySelector(".readerControls_item.download");
if (appDownloadBtn) {
appDownloadBtn.style.display = "none";
}
// 移动端UA下会显示打开app阅读
let toAppBtn = document.querySelector(".readerFooter_button.blue");
if (toAppBtn) {
// 直接删除该元素
toAppBtn.parentNode.removeChild(toAppBtn);
}
}, 900)
// 获取button.rbb_item
let invoke = document.querySelector(".readerBottomBar.showShadow");
// 为笔记列表添加点击事件
// 为所有(sectionListItem_content noteItem_content clickable)设置点击隐藏notePanel
let noteItems = document.getElementsByClassName("sectionListItem_content noteItem_content clickable");
for (let i = 0; i < noteItems.length; i++) {
noteItems[i].addEventListener("click", function () {
// 保存到上一个笔记
lastNote = noteItems[i];
notePanel.style.display = "none";
setTimeout(function () {
// 获取当前.app_content(div) 离顶部的距离
let appContent = document.querySelector(".app_content");
let appContentTop = Math.round(appContent.getBoundingClientRect().top);
// 如果top 为-75(PC) -11(MOBILE),这个高度可能受屏幕高度影响(?)，需检测是否有上一页，可能需要调用翻页并重新调用跳转笔记
console.log("appContentTop:" + appContentTop);
// TODO 考虑重构代码理清逻辑
if (appContentTop == -75 || appContentTop == -11 || appContentTop == -12) {
// 则判断为上一页，调用翻页并重新调用跳转笔记
console.log("start to judge if it is prev page");
// 可以考虑每个笔记跳转时都直接切换章节再跳转避免触发翻页bug
setTimeout(function () {
// 高度无变化，判断为需要切换上一页
if (appContentTop == -75 || appContentTop == -11 || appContentTop == -12) {
// 获取 ul(clz:readerCatalog_list),
// 下的div(chapterItem_link chapterItem_level1)比较div中span文字
// 选择不与当前标题相同的item调用点击事件，再重新调用切换笔记
let catalogList = document.querySelector(".readerCatalog_list");
let catalogItems = catalogList.getElementsByClassName("chapterItem_link chapterItem_level1");
let titleText = title.innerText;
for (let i = 0; i < catalogItems.length; i++) {
if (catalogItems[i].querySelector("span").innerText != titleText) {
console.log("jump another chapter");
catalogItems[i].dispatchEvent(
new MouseEvent("click", {
clientX: 1,
clientY: 1,
})
);
break;
}
}
setTimeout(function () {
lastNote.dispatchEvent(
new MouseEvent("click", {
clientX: 1,
clientY: 1,
})
);
// 跳转到上一个笔记位置
setTimeout(function () {
jumpNote();
}, 100);
}, 600);
// console.log("start to jumpNote");
// localStorage.setItem("lastNotePos", i);
// localStorage.setItem("need_jump", true);
}
}, 1600);
}
}, 100);
});
}
// 如果localStorage中保存了上一个笔记
// if (localStorage.getItem("lastNotePos")) {
// // 获取上一个笔记
// let lastPos = localStorage.getItem("lastNotePos");
// if (lastPos) {
// lastNote = noteItems[lastPos];
// // 获取是否需要跳转
// let need_jump = localStorage.getItem("need_jump");
// if (need_jump == "true") {
// lastNote.dispatchEvent(
// new MouseEvent("click", {
// clientX: 1,
// clientY: 1,
// })
// );
// // 跳转到上一个笔记位置
// setTimeout(function () {
// jumpNote();
// // 清除localStorage
// localStorage.removeItem("lastNotePos");
// localStorage.removeItem("need_jump");
// }, 100);
// }
// }
// }
// 底部添加笔记按钮
if (invoke) {
// 获取笔记图标
let noteIcon = document.querySelector('.readerControls_item.note').querySelector('.icon');
let backgroundImg = getComputedStyle(noteIcon).getPropertyValue("background-image");
// 在readerBottomBar 的 rbb_item.setting(bar内第三个button) 后添加一个button
let newInvoke = document.createElement("button");
newInvoke.className = "rbb_item note";
newInvoke.title = "笔记";
newInvoke.innerHTML = '<span class="icon""></span><span class="txt">笔记</span>';
invoke.insertBefore(newInvoke, invoke.children[3]);
newInvoke.querySelector('.icon').style.backgroundImage = backgroundImg;
// 设置点击事件为切换readerNotePanel的display
newInvoke.addEventListener("click", function () {
// 不隐藏readerBottomBar, 为readerBottomBar添加active class
setTimeout(function () {
invoke.classList.add("active");
}, 100);
let notePanel = document.getElementsByClassName("readerNotePanel")[0];
if (notePanel.style.display == "none") {
notePanel.style.display = "";
} else {
notePanel.style.display = "none";
}
// 延迟100ms
setTimeout(function () {
jumpNote();
}, 100);
});
}
// 监听点击事件(readerControls_item note)
document.querySelector(".readerControls_item.note").addEventListener("click", function () {
jumpNote();
});
}, 1500);
})();