Wikipedia

User:Polygnotus/Scripts/NewCommentsNavigator.js: Difference between revisions

Browse history interactively
Content deleted Content added
←Created page with '// Wikipedia Highlighted Comments Navigator // Add to your common.js to navigate through unread highlighted comments $(document).ready(function() { // Wait a bit for the page to fully load and highlights to be applied setTimeout(function() { initCommentNavigator(); }, 1000); }); function initCommentNavigator() { const highlights = $('.ext-discussiontools-init-highlight'); if (highlights.length === 0) { return; // N...'
Tag: Recreated
 
 
(3 intermediate revisions by the same user not shown)
Line 12:
const highlights = $('.ext-discussiontools-init-highlight');
// Only show navigator if there are more than 1 highlighted comment
if (highlights.length ==<= 01) {
return; // No highlighted comments found
return;
}
Line 22 ⟶ 23:
<div id="comment-navigator" style="
position: fixed;
topbottom: 50%0;
rightleft: 20px0;
transformright: translateY(-50%)0;
background: #f8f9fa;
border-top: 1px2px solid #a2a9b1;
border-radiuspadding: 4px8px 20px;
paddingbox-shadow: 8px0 -2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1000;
font-size: 12px14px;
min-widthdisplay: 120pxflex;
align-items: center;
justify-content: center;
gap: 15px;
">
<divbutton styleid="textprev-align:comment" center;type="button" margin-bottom: 5px; font-weight: bold;style=">
Unreadbackground: Comments#0645ad;
</div> color: white;
<div style="text-align: center; margin-bottom: 8px; colorborder: #54595dnone;">
<span id="commentborder-counter">1</span> ofradius: ${highlights.length}3px;
</div> padding: 6px 12px;
<div style="display: flex; justify-content cursor: space-betweenpointer;">
<button id="prevfont-comment"size: style="14px;
backgroundmin-width: #0645ad60px;
color: white;">←</button>
border: none;
<span border-radius: 2px;style="
paddingfont-weight: 4px 8pxbold;
cursorcolor: pointer#222;
font-size: 11px16px;
">←min-width: Prev</button>80px;
<button id="nexttext-comment"align: style="center;
"><span id="comment-counter">1</span> / ${highlights.length}</span>
background: #0645ad;▼
color: white;
<button id="next-comment" type="button" border: none;style="
border-radiusbackground: 2px#0645ad;
paddingcolor: 4px 8pxwhite;
cursorborder: pointernone;
fontborder-sizeradius: 11px3px;
">Nextpadding: →</button>6px 12px;
</div> cursor: pointer;
<div style="margin-top: 8px; text font-alignsize: center14px;">
<button id="closemin-navigator"width: style="60px;
background: #a2a9b1;">→</button>
color: #222;
<button id="close-navigator" type="button" border: none;style="
border-radiusbackground: 2px#a2a9b1;
paddingcolor: 2px 6px#222;
cursorborder: pointernone;
fontborder-sizeradius: 10px3px;
">Close</button>padding: 4px 8px;
</div> cursor: pointer;
▲ backgroundfont-size: #0645ad12px;
margin-left: 20px;
">✕</button>
</div>
`;
Line 102 ⟶ 108:
// Event handlers
$('#prev-comment').click(function(e) {
e.preventDefault();
e.stopPropagation();
if (currentIndex > 0) {
currentIndex--;
updateSelection(currentIndex);
}
return false;
});
$('#next-comment').click(function(e) {
e.preventDefault();
e.stopPropagation();
if (currentIndex < highlights.length - 1) {
currentIndex++;
updateSelection(currentIndex);
}
return false;
});
$('#close-navigator').click(function(e) {
e.preventDefault();
e.stopPropagation();
// Remove outlines and hide navigator
highlights.css('outline', '');
$('#comment-navigator').remove();
return false;
});
Retrieved from "https://en.wikipedia.org/wiki/User:Polygnotus/Scripts/NewCommentsNavigator.js"