Designed for reading long articles, it helps remember the current reading progress.
Per
// ==UserScript==
// @name Draggable Reference Line
// @description Designed for reading long articles, it helps remember the current reading progress.
// @version 1.0
// @author Rui LIU (@liurui39660)
// @match *://*/*
// @icon https://icons.duckduckgo.com/ip2/example.com.ico
// @run-at document-body
// @namespace https://greatest.deepsurf.us/users/193469
// ==/UserScript==
(function () {
'use strict';
const height = 2; // px, height of the visible line
const padding = 2; // px, additional draggable area above and below the line, not the sum of them
const color = 'red'; // or #-string
const body = document.getElementsByTagName('body')[0];
const line = document.createElement('div');
line.textContent = '#DraggableReferenceLine';
line.style = `margin: 0; padding: ${padding}px 0; cursor: n-resize; font-size: 0; color: #fff0; background: ${color}; background-clip: content-box; width: 100vw; height: ${height}px; position: absolute; top: ${localStorage[`DraggableLine_${window.location.pathname}${window.location.search}`] || -padding - height / 2}px; z-index: 10;`;
let callbackMouseMove = ev => {
line.style.top = `${ev.pageY - padding - height / 2}px`;
};
let callbackMouseUp = ev => {
if (ev.detail === 1) { // Don't overwrite dblclick
body.releasePointerCapture(ev.pointerId);
body.style.cursor = null;
const top = Math.max(-padding, parseFloat(line.style.top)); // So you can't move it out of page
line.style.top = `${top}px`;
localStorage[`DraggableLine_${window.location.pathname}${window.location.search}`] = top;
[onmouseup, onmousemove, callbackMouseUp, callbackMouseMove] = [callbackMouseUp, callbackMouseMove, onmouseup, onmousemove];
}
};
line.addEventListener('mousedown', ev => {
if (ev.detail === 1) {
ev.preventDefault(); // Don't select text
body.setPointerCapture(ev.pointerId); // The cursor won't change back to pointer when out of browser
body.style.cursor = 'n-resize';
[onmouseup, onmousemove, callbackMouseUp, callbackMouseMove] = [callbackMouseUp, callbackMouseMove, onmouseup, onmousemove];
}
});
line.addEventListener('dblclick', () => {
line.style.top = `${-padding - height / 2}px`;
localStorage.removeItem(`DraggableLine_${window.location.pathname}${window.location.search}`);
});
body.appendChild(line);
})();