User:Polygnotus/Scripts/Buttons.js
Code that you insert on this page could contain malicious content capable of compromising your account. If you import a script from another page with "importScript", "mw.loader.load", "iusc", or "lusc", take note that this causes you to dynamically load a remote script, which could be changed by others. Editors are responsible for all edits and actions they perform, including by scripts. User scripts are not centrally supported and may malfunction or become inoperable due to software changes. A guide to help you find broken scripts is available. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump.
This code will be executed when previewing this page.
This code will be executed when previewing this page.
Documentation for this user script can be added at User:Polygnotus/Scripts/Buttons.
// <nowiki>
// Wikipedia Comment Navigator
// If the page was opened via a notification, navigates between new (highlighted) comments.
// Otherwise, navigates between comments made by the logged-in user.
// Buttons appear at the bottom-left only after scrolling down past the page header.
(function () {
'use strict';
// Only run on talk pages (odd namespace numbers)
if (mw.config.get('wgNamespaceNumber') % 2 !== 1) {
return;
}
mw.loader.using(['mediawiki.util'], function () {
var username = mw.config.get('wgUserName');
var comments = [];
var mode;
// --- Mode detection ---------------------------------------------------
// DiscussionTools highlights new comments with this class when arriving
// via a notification link.
var highlighted = Array.from(
document.querySelectorAll('.ext-discussiontools-init-highlight')
);
if (highlighted.length > 0) {
mode = 'new';
comments = highlighted;
} else if (username) {
mode = 'own';
// Find comment anchors for comments authored by the current user.
// DiscussionTools marks each comment with data-mw-comment-sig whose
// value starts with "c-<username>-".
var seen = new Set();
var usernameSafe = username.replace(/ /g, '_');
document.querySelectorAll('[data-mw-comment-sig]').forEach(function (sig) {
var id = sig.getAttribute('data-mw-comment-sig');
if (seen.has(id)) { return; }
var match = id.match(/^c-([^-]+)-/);
if (!match || match[1] !== usernameSafe) { return; }
// The start anchor for a comment has data-mw-comment-start and id == commentId
// CSS.escape handles any special characters in the id.
var escapedId = typeof CSS !== 'undefined' && CSS.escape
? CSS.escape(id)
: id.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, '\\$1');
var anchor = document.querySelector(
'[data-mw-comment-start][id="' + escapedId + '"]'
);
if (!anchor) { return; }
comments.push(anchor);
seen.add(id);
});
// Sort by document order
comments.sort(function (a, b) {
return (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING) ? -1 : 1;
});
}
if (comments.length === 0) { return; }
// --- State ------------------------------------------------------------
var currentIndex = 0;
// --- Scroll helper ----------------------------------------------------
// Scrolls so the target element sits near the top of the viewport.
function scrollToComment(el) {
var TOP_OFFSET = 10; // px gap from the top of the viewport
var targetY = el.getBoundingClientRect().top + window.pageYOffset - TOP_OFFSET;
window.scrollTo({ top: targetY, behavior: 'smooth' });
}
// --- Build the navigation widget --------------------------------------
var nav = document.createElement('div');
nav.id = 'comment-nav-widget';
Object.assign(nav.style, {
position : 'fixed',
bottom : '20px',
left : '20px',
zIndex : '9999',
display : 'none', // hidden until scroll threshold is passed
alignItems : 'center',
gap : '6px',
background : '#f8f9fa',
border : '1px solid #a2a9b1',
borderRadius: '4px',
padding : '5px 10px',
boxShadow : '0 2px 8px rgba(0,0,0,0.25)',
fontSize : '13px',
userSelect : 'none',
});
// Label shows mode
var label = document.createElement('span');
label.style.color = '#54595d';
label.textContent = mode === 'new' ? 'New' : 'Mine';
function makeButton(symbol, title) {
var btn = document.createElement('button');
btn.type = 'button';
btn.textContent = symbol;
btn.title = title;
Object.assign(btn.style, {
background : '#0645ad',
color : '#fff',
border : 'none',
borderRadius: '3px',
padding : '3px 8px',
cursor : 'pointer',
fontSize : '15px',
lineHeight : '1.2',
});
btn.addEventListener('mouseenter', function () {
if (!btn.disabled) { btn.style.background = '#0b0080'; }
});
btn.addEventListener('mouseleave', function () {
if (!btn.disabled) { btn.style.background = '#0645ad'; }
});
return btn;
}
var prevBtn = makeButton('↑', 'Previous comment');
var counter = document.createElement('span');
var nextBtn = makeButton('↓', 'Next comment');
counter.style.cssText = 'font-weight:bold;min-width:48px;text-align:center;color:#222;';
nav.appendChild(label);
nav.appendChild(prevBtn);
nav.appendChild(counter);
nav.appendChild(nextBtn);
document.body.appendChild(nav);
// --- Update UI state --------------------------------------------------
function updateUI() {
counter.textContent = (currentIndex + 1) + '\u202f/\u202f' + comments.length;
prevBtn.disabled = (currentIndex === 0);
nextBtn.disabled = (currentIndex === comments.length - 1);
prevBtn.style.opacity = prevBtn.disabled ? '0.4' : '1';
nextBtn.style.opacity = nextBtn.disabled ? '0.4' : '1';
prevBtn.style.cursor = prevBtn.disabled ? 'default' : 'pointer';
nextBtn.style.cursor = nextBtn.disabled ? 'default' : 'pointer';
}
updateUI();
// --- Button events ----------------------------------------------------
prevBtn.addEventListener('click', function (e) {
e.preventDefault();
if (currentIndex > 0) {
currentIndex--;
scrollToComment(comments[currentIndex]);
updateUI();
}
});
nextBtn.addEventListener('click', function (e) {
e.preventDefault();
if (currentIndex < comments.length - 1) {
currentIndex++;
scrollToComment(comments[currentIndex]);
updateUI();
}
});
// --- Keyboard shortcuts -----------------------------------------------
document.addEventListener('keydown', function (e) {
if (!nav.offsetParent) { return; } // widget not visible
if (/^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName)) { return; }
if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') { e.preventDefault(); prevBtn.click(); }
if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { e.preventDefault(); nextBtn.click(); }
});
// --- Show widget only after scrolling past the header -----------------
// The threshold keeps the widget from appearing on top of the left-hand
// sidebar / toolbox menus that are visible when the page is not scrolled.
var SHOW_THRESHOLD = 250; // px — adjust if needed for your skin
function onScroll() {
nav.style.display = window.pageYOffset > SHOW_THRESHOLD ? 'flex' : 'none';
}
window.addEventListener('scroll', onScroll, { passive: true });
onScroll(); // run once on load in case the page opens mid-scroll
}); // end mw.loader.using
}());
// </nowiki>