Visual indicator of page progress while scrolling
// ==UserScript==
// @license MIT
// @name Scroll Page Progress
// @namespace http://tampermonkey.net/
// @version 1.8.3
// @description Visual indicator of page progress while scrolling
// @author You
// @match *://*/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// ==/UserScript==
(function () {
'use strict';
const currentState = {
deg: 0,
progress: 0,
zIndex: 0,
movementIntervalId: null
}
let globalShadow
let progressBar
const createDiv = () => document.createElement('div')
function insertCirculaProgressBarEl() {
const shadowHost = createDiv()
shadowHost.id = 'host-shwadow-circular-progress'
const shadow = shadowHost.attachShadow({ mode: "closed" });
globalShadow = shadow
const circularProgressBar = createDiv()
progressBar = circularProgressBar
const contentWrapper = createDiv()
const closeOverlay = createDiv()
const title = createDiv()
const overlay = createDiv()
const leftSide = createDiv()
const rightSide = createDiv()
circularProgressBar.classList.add('circular-progress-bar')
title.classList.add('title');
closeOverlay.classList.add('close-overlay');
contentWrapper.classList.add('content-wrapper')
overlay.classList.add('overlay');
leftSide.classList.add('left-side');
rightSide.classList.add('right-side');
title.innerText = '-%'
// this is the only way to create a trusted HTML element
if (window.trustedTypes) {
closeOverlay.innerHTML = window.trustedTypes.defaultPolicy.createHTML('×')
} else {
closeOverlay.innerHTML = '×'
}
closeOverlay.addEventListener('click', function () {
//circularProgressBar.style.display = 'none'
const screenWidth = window.innerWidth;
const elementoWidth = circularProgressBar.offsetWidth;
// Calcular la nueva posición
const newPosition = screenWidth - elementoWidth / 2;
// Aplicar la nueva posición
circularProgressBar.style.left = `${newPosition}px`;
const topPosition = circularProgressBar.style.top
const path = window.location.pathname;
let savedPaths = JSON.parse(localStorage.getItem('not-allowed-paths')) || [];
const existingEntryIndex = savedPaths.findIndex(entry => entry.path === path);
const newEntry = {
path: path,
left: newPosition,
top: topPosition || '0px' // Si el top no está definido, usa '0px' como valor por defecto
};
if (existingEntryIndex !== -1) {
// Si ya existe una entrada para la ruta, actualiza la posición
savedPaths[existingEntryIndex] = newEntry;
} else {
// Si no existe, añade la nueva entrada
savedPaths.push(newEntry);
}
console.log("savedPaths", savedPaths)
// Guardar el array actualizado en localStorage
localStorage.setItem('not-allowed-paths', JSON.stringify(savedPaths));
});
;[title, overlay, leftSide, rightSide].forEach(childEl => contentWrapper.appendChild(childEl))
circularProgressBar.appendChild(closeOverlay)
circularProgressBar.appendChild(contentWrapper)
shadow.appendChild(circularProgressBar)
document.body.appendChild(shadowHost)
}
function addCSS() {
const styleSheet = document.createElement('style');
styleSheet.textContent = `
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.circular-progress-bar {
--backgroundColor: #424242;
--left-side-angle: 180deg;
--barColor:orangered;
width: 60px;
height: 60px;
color: #fff;
border-radius: 50%;
position: fixed;
z-index: 2147483646;
background: var(--backgroundColor);
border: 5px solid white;
box-shadow:
0 1px 1px hsl(0deg 0% 0% / 0.075),
0 2px 2px hsl(0deg 0% 0% / 0.075),
0 4px 4px hsl(0deg 0% 0% / 0.075),
0 8px 8px hsl(0deg 0% 0% / 0.075),
0 16px 16px hsl(0deg 0% 0% / 0.075);
text-align: center;
cursor: pointer;
transition: opacity 0.2s ease;
}
.circular-progress-bar .overlay {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--backgroundColor);
transform-origin: right;
transform: rotate(var(--overlay));
}
.close-overlay {
width: 20px;
height: 20px;
position: absolute;
left: 100%;
top: -30%;
z-index: 2147483647;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: orangered;
font-size: 19px;
text-align: center;
opacity: 0;
}
.close-overlay:hover {
font-weight: bold;
}
.content-wrapper {
overflow: hidden;
height: 100%;
width: 100%;
border-radius: 50%;
position: relative;
}
.circular-progress-bar:hover .close-overlay {
opacity:1;
}
.circular-progress-bar .title {
font-size: 15px;
font-weight: bold;
position:relative;
height: 100%;
display:flex;
justify-content:center;
align-items: center;
z-index: 100;
}
.circular-progress-bar .left-side,
.circular-progress-bar .right-side {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 5px solid var(--barColor);
border-radius: 100px 0px 0px 100px;
border-right: 0;
transform-origin: right;
}
.circular-progress-bar .left-side {
transform: rotate(var(--left-side-angle));
}
.circular-progress-bar .right-side {
transform: rotate(var(--right-side-angle));
}
`
globalShadow.appendChild(styleSheet)
}
function setAngle(deg) {
const progressBar = globalShadow.querySelector('.circular-progress-bar')
const leftSide = globalShadow.querySelector('.left-side')
const rightSide = globalShadow.querySelector('.right-side')
const overlay = globalShadow.querySelector('.circular-progress-bar .overlay')
const zIndex = deg > 180 ? 100 : 0
const rightSideAngle = deg < 180 ? deg : 180
const leftSideAngle = deg
const overlayAngle = deg < 180 ? 0 : deg - 180
const zIndexChangedToPositive = currentState.zIndex === 0 && zIndex === 100
if (deg > 180) {
rightSide.style.zIndex = 2
leftSide.style.zIndex = 0
overlay.style.zIndex = 1
} else {
rightSide.style.zIndex = 1
leftSide.style.zIndex = 0
overlay.style.zIndex = 2
}
progressBar.style.setProperty('--overlay', `${overlayAngle}deg`);
progressBar.style.setProperty('--right-side-angle', `${rightSideAngle}deg`);
progressBar.style.setProperty('--left-side-angle', `${leftSideAngle}deg`);
}
function smoothProgressBar(targetProgress, duration) {
if (currentState.movementIntervalId) {
clearInterval(currentState.movementIntervalId);
}
let currentProgress = currentState.deg
const increment = (targetProgress - currentProgress) / (duration / 10);
currentState.movementIntervalId = setInterval(function () {
currentProgress += increment;
if ((increment > 0 && currentProgress >= targetProgress) || (increment < 0 && currentProgress <= targetProgress)) {
currentProgress = targetProgress;
clearInterval(currentState.movementIntervalId);
}
setAngle(currentProgress)
}, 10);
}
function percentageToAngle(percentageNumber) {
if (percentageNumber > 100) {
return 360
}
if (percentageNumber < 0) {
return 0
}
return (360 * percentageNumber) / 100
}
function setPercentage(percentageNumber) {
const angle = percentageToAngle(percentageNumber)
smoothProgressBar(angle, 400)
}
function debounce(callback, wait) {
let timerId;
return (...args) => {
clearTimeout(timerId);
timerId = setTimeout(() => {
callback(...args);
}, wait);
};
}
function setEventListeners() {
let offsetX = 0, offsetY = 0, isDragging = false;
progressBar.addEventListener("mousedown", (e) => {
e.preventDefault()
offsetX = e.clientX - progressBar.offsetLeft;
offsetY = e.clientY - progressBar.offsetTop;
isDragging = true;
progressBar.style.cursor = "grabbing";
progressBar.style.opacity = "0.3";
});
document.addEventListener("mousemove", (e) => {
if (isDragging) {
e.preventDefault();
const left = e.clientX - offsetX;
const top = e.clientY - offsetY;
progressBar.style.left = `${left}px`;
progressBar.style.top = `${top}px`;
savePosition(left, top); // Guardar la posición cada vez que se mueve
}
});
document.addEventListener("mouseup", () => {
isDragging = false;
progressBar.style.cursor = "grab";
progressBar.style.opacity = "1";
});
}
function savePosition(left, top) {
const position = { left, top };
localStorage.setItem("elementPosition", JSON.stringify(position));
}
function loadPosition() {
const currentPath = window.location.pathname;
const savedPaths = JSON.parse(localStorage.getItem('not-allowed-paths')) || [];
const entry = savedPaths.find(entry => entry.path === currentPath);
if (entry) {
console.log('exist entry')
// Si existe una entrada para la ruta, aplica las posiciones guardadas
progressBar.style.left = `${entry.left}px`;
progressBar.style.top = `${entry.top}`;
return;
}
const savedPosition = localStorage.getItem("elementPosition");
if (savedPosition) {
const { left, top } = JSON.parse(savedPosition);
progressBar.style.left = `${left}px`;
progressBar.style.top = `${top}px`;
} else {
progressBar.style.right = `10px`;
progressBar.style.top = `10px`;
}
}
function getCurrentScrollProgress() {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const progress = (winScroll / height) * 100;
return Math.trunc(progress);
}
function watchScroll() {
const progressBarTitle = globalShadow.querySelector('.title')
document.addEventListener('scroll', debounce(() => {
setPercentage(getCurrentScrollProgress())
progressBarTitle.innerText = getCurrentScrollProgress() + '%'
currentState.progress = getCurrentScrollProgress()
currentState.deg = percentageToAngle(getCurrentScrollProgress())
}, 50))
}
document.onreadystatechange = function () {
if (document.readyState == "complete") {
if (window.trustedTypes && window.trustedTypes.createPolicy && !window.trustedTypes.defaultPolicy) {
window.trustedTypes.createPolicy('default', {
createHTML: (string, sink) => string
});
}
insertCirculaProgressBarEl()
setEventListeners()
addCSS()
loadPosition()
watchScroll()
}
}
})();