// ==UserScript==
// @name AO3: [Wrangling] View and Post Comments from the Bin
// @namespace https://greasyfork.org/en/users/906106-escctrl
// @description Loads a preview of top-level comments (such as translations) and lets you comment on the tag
// @author escctrl
// @version 0.5
// @match *://*.archiveofourown.org/tags/*/wrangle?*
// @grant none
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js
// @require https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js
// @require https://update.greasyfork.org/scripts/491888/1355841/Light%20or%20Dark.js
// @license MIT
// ==/UserScript==
/* eslint-disable no-multi-spaces */
/* global jQuery, lightOrDark */
(function($) {
'use strict';
if ($('#wrangulator').length === 0) return; // bow out in an empty bin
/***** INITIALIZE THE COMMENTS DIALOG *****/
let dlg = "#peekTopLevelCmt";
// prepare the HTML framework within the new dialog including the textarea
$("#main").append(`<div id="peekTopLevelCmt">
<div id="toplvlcmt-placeholder"></div>
<div id="add-toplvlcmt">
<div id="pseud-toplvlcmt"></div>
<textarea data-tagname="" data-commentid="" id="txt-toplvlcmt"></textarea>
<p class="submit"><span id="toplvlcmt-pagelink"></span><button type="button" class="submitComment"><span class="submitCommentText">Comment</span><span class="spin"/></button></p>
</div>
</div>`);
// adding the jQuery stylesheet to style the dialog, and fixing the interference of AO3's styling
if(document.head.querySelector('link[href$="/jquery-ui.css"]') === null) {
// if the background is dark, use the dark UI theme to match
let dialogtheme = lightOrDark($('body').css('background-color')) == "dark" ? "dark-hive" : "base";
$("head").append(`<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/${dialogtheme}/jquery-ui.css">`);
}
$("head").append(`<style type="text/css">.ui-widget, ${dlg}, .ui-dialog .ui-dialog-buttonpane button { font-size: revert; line-height: 1.286; }
.ui-widget a { cursor: pointer; }
${dlg} .toplvlcmt { margin-top: 1em; clear: right; }
${dlg} .toplvlcmt .toplvlby { font-size: 0.8em; margin: 0 0 0 0.5em; float: right; }
${dlg} .toplvlcmt .userstuff { border-left: 2px dotted ${$(dlg).css('color')}; padding-left: 0.5em; }
${dlg} .comment-format a { padding: 0.3em 0.5em; font-size: 90%; width: 1em; }
${dlg} .fontawesomeicon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; color: ${$(dlg).css('color')} }
${dlg} textarea { width: 100%; resize: vertical; height: 5em; min-height: 5em; clear: both; }
${dlg} .cancelEdit { margin-left: 0.5em; }
${dlg} #add-toplvlcmt { margin-top: 1em; }
${dlg} #toplvlcmt-pagelink { float: left; }
#load-toplvlcmt, ${dlg} .submitComment { white-space: nowrap; }
#load-toplvlcmt .spin, ${dlg} .submitComment .spin { display: none; margin-left: 0.5em; }
#load-toplvlcmt .spin::after {
content: "\\2312";
display: inline-block;
animation: loading 3s linear infinite;
}
@keyframes loading {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>`);
// optimizing the size of the GUI in case it's a mobile device
let dialogwidth = window.visualViewport.width;
dialogwidth = dialogwidth > 700 ? 700 : dialogwidth * 0.9;
let dialogheight = window.visualViewport.height;
dialogheight = dialogheight * 0.7;
$(dlg).dialog({
appendTo: "#main",
modal: false,
autoOpen: false,
resizable: false,
width: dialogwidth,
maxHeight: dialogheight,
title: "Tag Comment Threads",
close: function() {
// reset everything including the data-tagname attribute
resetDialog();
$(dlg).find('textarea')[0].dataset.tagname = "";
}
});
// we add a button the Manage header to load all comments on this page at once
$('#wrangulator').find('thead th').filter(function(ix, el) { return $(this).text() === "Manage"; })
.append(`<br /><button type="button" id="load-toplvlcmt">Load all Comments<span class="spin"/></button>`);
/***** BUTTON EVENTS *****/
// when user clicks the "Load all Comments" button
$('#wrangulator').on('click','#load-toplvlcmt', function(e) {
e.preventDefault();
loadAllTopLevelComments();
});
// we co-opt the /comments link and instead of opening the page, we give a little additional dialog
$('#wrangulator').on('click','a[href$="/comments"]', async function(e) {
e.preventDefault();
let row = $(e.target).parents('tr')[0];
if (row.dataset.cmttoptevel === "unknown") {
let resolved = await loadTopLevelComments(row); // if we have no data for this tag yet, we load it
if (resolved === "failed") { // if XHR failed, we have probably encountered a 403 or 500 error. don't open the dialog
alert('Top Level Comments could be loaded, we encountered errors trying to load the Comment page.');
return;
}
}
$(dlg).find('textarea').prop('value', ''); // empty the textbox content from whatever was there before
viewTopLevelComments(e.target); // then we write out the dialog
});
// not a button event, but if the window resizes the dialog would move off of the screen
$(window).on('resize', function(e) {
// optimizing the size of the GUI in case it's a mobile device
let dialogwidth = window.visualViewport.width;
dialogwidth = dialogwidth > 700 ? 700 : dialogwidth * 0.9;
let dialogheight = window.visualViewport.height;
dialogheight = dialogheight * 0.7;
let target = $(dlg).dialog("option", "position").of; // find the current target button
// reposition and resize the dialog
$(dlg).dialog("option", "position", { my: "left top", at: "left bottom", of: target } )
.dialog("option", "width", dialogwidth)
.dialog("option", "maxHeight", dialogheight);
});
/***** RETRIEVE TOP-LEVEL COMMENTS *****/
// on pageload, silently loop over all tags on the page
// check if we already have the tag stored
// grab the user's pseuds from storage
let pseuds = JSON.parse(sessionStorage.getItem("cmt_pseud") || null);
$(dlg).find('#pseud-toplvlcmt').html(pseuds);
let rows = $('#wrangulator').find('tbody tr').toArray();
for (let row of rows) {
let tagname = $(row).find('th label').text();
let cmtTopLevel = JSON.parse(sessionStorage.getItem("cmt_" + tagname) || null);
if (cmtTopLevel !== null) { // if we found something in storage
cmtTopLevel = new Map(cmtTopLevel);
updateCommentButton($(row).find('a[href$="/comments"]'), cmtTopLevel.size, cmtTopLevel["+"] === "+");
// and then we should put it somewhere so we know not to ask again on click
row.dataset.cmttoptevel = "stored";
}
else row.dataset.cmttoptevel = "unknown";
}
function updateCommentButton(target, cmtCount, morePages) {
// how many comment threads are there?
if (morePages) cmtCount = cmtCount-1 + "+"; // if the last item in the array is a + turn this from 21 to "20+" threads
// we add the comment count to the icon ... not on the button, that changes width, but to the title
if (cmtCount === 0) {
$(target).prop('title', `There are no comments on this tag`);
if ($(target).css('font-family').includes("FontAwesome")) $(target).html(""); // change the icon to "comments-o" f0e6 if there's no comment
}
else {
if (cmtCount === 1) $(target).prop('title', `There is 1 comment thread on this tag`);
else $(target).prop('title', `There are ${cmtCount} comment threads on this tag`);
if ($(target).css('font-family').includes("FontAwesome")) $(target).html(""); // change the icon to "comments" f086 if there's (now) a comment
}
}
async function loadAllTopLevelComments() {
$('#load-toplvlcmt').attr('disabled', true) // stop button from being clicked again
.find('.spin').css('display', 'inline-block'); // loading indicator
let rowsToDo = $(rows).filter( function() { return this.dataset.cmttoptevel === "unknown"; } ).toArray(); // only worry about not stored items
// when clicking the button, loop over all tags on the page
for (let row of rowsToDo) {
let resolved = await loadTopLevelComments(row); // grab the top level comments from the page
if (resolved === "loaded") await waitforXSeconds(2); // if XHR succeeded, creates a x-seconds wait period between function calls
else { // if XHR failed, we have probably encountered a 403 or 500 error. don't try more pages
alert('Not all Top Level Comments could be loaded, we encountered errors trying to load the Comment pages.');
break;
}
}
$('#load-toplvlcmt').text('All Comments Loaded') // change text
.find('.spin').css('display', 'none'); // remove loading indicator
}
function waitforXSeconds(x) {
return new Promise((resolve) => {
setTimeout(() => {
resolve("");
}, x * 1000);
});
}
/***** COMMON FUNCTION FOR BACKGROUND PAGELOADS *****/
function loadTopLevelComments(row) {
return new Promise((resolve) => {
let target = $(row).find('[href$="/comments"]')[0];
let tagname = $(row).find('th label').text();
let xhr = $.ajax({ url: $(target).prop('href'), type: 'GET' })
.fail(function(xhr, status) {
console.warn(`Top level comments for ${tagname} could not be loaded due to response error:`, status);
resolve("failed");
}).done(function(response) {
// in case we're served a code:200 page that doesn't actually contain the comments page, we quit
if ($(response).find('#feedback').length === 0) {
console.warn(`Top level comments for ${tagname} could not be loaded because response didn't contain the #feedback`);
resolve("failed"); return;
}
// grab this user's possible pseuds and store it in session
pseuds = $(response).find('#add_comment h4.heading')[0].outerHTML;
sessionStorage.setItem("cmt_pseud", JSON.stringify(pseuds));
let cmtStorage = parseTopLevelComments(response);
sessionStorage.setItem("cmt_" + tagname, JSON.stringify([...cmtStorage])); // store all comments in session
row.dataset.cmttoptevel = "stored"; // set this tag from unknown to stored, so we don't try to load it again
updateCommentButton(target, cmtStorage.size, (cmtStorage["+"] === "+"));
resolve("loaded");
});
});
}
function parseTopLevelComments(response) {
// grab top level comments
let cmtTopLevel = $(response).find('#comments_placeholder > ol.thread > li.comment').toArray();
// we'll store the comments in a Map to ensure insertion order while being able to later use an object key to reference the item
let cmtStorage = new Map();
for (let [i, v] of cmtTopLevel.entries()) {
let commentID = $(v).find('li[id^="edit_comment_link_"')?.prop('id') || ""; // grab the CSS ID off the Edit button (our comment if it exists)
commentID = commentID === "" ? 'c'+i : commentID.match(/\d+/)[0]; // if there's no ID, just count to 20, otherwise grab the commentID
let by = $(v).find('.byline a').text(); // name of the user who posted the comment
let content = $(v).find('.userstuff').html().trim(); // content of the post
cmtStorage.set(commentID, [by, content]); // put the comment into our storage
}
if ($(response).find('#comments_placeholder > ol.pagination').length > 0) cmtStorage.set("+", "+"); // pagination -> more than 20 top-level comments
return cmtStorage;
}
/***** DISPLAY THE COMMENTS DIALOG *****/
function viewTopLevelComments(target) {
let tagname = $(target).parents('tr').first().find('th label').text();
let taglink = $(target).prop('href');
$(dlg).dialog("option", "title", tagname ); // dialog title shows tagname for which it was opened
// create a link to the plain Comments page
let iconExternalLink = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>`;
iconExternalLink = `<a href="${$(target).prop('href')}" target="_blank">Open Comment Page <span class="fontawesomeicon">${iconExternalLink}</span></a>`;
$('#toplvlcmt-pagelink').html(iconExternalLink);
// create the preview of the first 20 comments
let comments = new Map(JSON.parse(sessionStorage.getItem("cmt_" + tagname)));
if (comments.get('+') === "+") comments.delete('+'); // if an item in the array is a + get rid of it
let content = (comments.size === 0) ? `<div class="toplvlcmt"><i>There are no comments on this tag yet.</i></div>` : "";
for (let [id, comment] of comments.entries()) {
let editButton = !id.startsWith('c') ? ` <button type="button" class="editComment" data-commentid="${ id }">Edit</button>` : "";
content += `<div class="toplvlcmt">
<p class="toplvlby">by ${ comment[0] }${ editButton }</p>
<blockquote class="userstuff">${ comment[1] }</blockquote>
</div>`;
}
$(dlg).find('#toplvlcmt-placeholder').html(content); // write comments to the dialog
// a textbox to leave a new comment - works with the "Comment Formatting & Preview" script
let cmtNew = $(dlg).find('#add-toplvlcmt textarea')[0];
cmtNew.dataset.tagname = encodeURIComponent(tagname);
cmtNew.dataset.commentid = "";
$(dlg).find('#pseud-toplvlcmt').html(pseuds);
$(dlg).dialog("option", "position", { my: "left top", at: "left bottom", of: target } ) // position the dialog at the clicked button
.dialog('open'); // finally, open the dialog
}
/***** SUBMIT A NEW COMMENT *****/
$('#main').on('click', `${dlg} button.submitComment`, function(e) {
e.preventDefault();
$(dlg).find('.submitComment').attr('disabled', true) // stop button from being clicked again
.find('.spin').css('display', 'inline-block').html("(submitting)"); // loading indicator
let tagname = decodeURIComponent($(dlg).find('textarea').attr('data-tagname'));
let target = $(dlg).dialog("option", "position").of;
// collect various input for commenting
let cmtData = new FormData();
cmtData.set('comment[comment_content]', $(dlg).find('textarea').prop('value'));
cmtData.set('comment[pseud_id]', $(dlg).find('[name="comment[pseud_id]"]').prop('value')); // either a hidden <input> or a <select>
cmtData.set('controller_name', 'comments');
cmtData.set('tag_id', tagname);
cmtData.set('authenticity_token', $('input[name="authenticity_token"]').prop('value'));
// difference when editing existing comments: the commentID is part of the URL
let commentID = $(dlg).find('textarea').attr('data-commentid') || "";
if (commentID !== "") {
commentID = "/" + commentID;
// and a couple of additional hidden fields that are required for comment editing
cmtData.set('_method', "patch");
cmtData.set('commit', "Update");
}
// submit the comment
let xhr = $.ajax({
url: "/comments" + commentID,
type: 'POST',
data: cmtData,
contentType: false,
processData: false
})
.fail(function(xhr, status, error) {
console.warn(`Posting comment to ${tagname} failed due to response error:`, status, error, xhr);
alert('Comment could not be submitted, we encountered an error. You can check the Console for details and/or try again.');
}).done(function(response) {
console.log(`Posting comment to ${tagname} succeeded`);
console.log(response);
// update the storage and comment button for this tag without another background pageload
let cmtTopLevel = parseTopLevelComments(response);
sessionStorage.setItem("cmt_" + tagname, JSON.stringify([...cmtTopLevel])); // store the updated comment list for this tag again
updateCommentButton(target, cmtTopLevel.size, (cmtTopLevel["+"] === "+"));
$(dlg).dialog('close');
}).always(function() {
$(dlg).find('.submitComment').attr('disabled', false) // allow button to be clicked again
.find('.spin').css('display', 'none').html(""); // remove loading indicator
$(dlg).find('.cancelEdit').remove(); // remove the cancel button
});
});
/***** EDIT AN EXISTING COMMENT *****/
/* on "Edit", we load the existing comment into the textarea so it can be edited
* on "Submit", the existing comment is overwritten (instead of a new comment being added) based on awareness of comment IDs
* on "Cancel", we reset the form so a new comment can be edited instead
*/
$('#main').on('click', `${dlg} button.editComment`, function(e) {
e.preventDefault();
resetDialog();
$(e.target).addClass('current'); // make the Edit button appear differently (in Default skin it looks clicked)
$(dlg).find('.submitComment .submitCommentText').text('Update'); // change text of the button to make it clear we're editing
$(dlg).find('.submitComment').after(`<button type="button" class="cancelEdit">Cancel</button>`); // add a cancel button that resets it all
$(dlg).find('textarea').attr('data-commentid', e.target.dataset.commentid); // copy over the commentID so we know what we're editing when hitting submit
$(dlg).find('textarea').prop('value', $(e.target).parents('.toplvlcmt').find('blockquote').html()); // put the existing comment text into the textfield
});
// reset everything when the user clicks Cancel in the dialog
$('#main').on('click', `${dlg} button.cancelEdit`, function(e) {
e.preventDefault();
resetDialog();
});
// reset everything except the data-tagname attribute
function resetDialog() {
$(dlg).find('.submitComment .submitCommentText').text('Comment'); // reset button text for adding a new comment
$(dlg).find('.cancelEdit').remove(); // remove the cancel button
$(dlg).find('.editComment').removeClass('current'); // reset the Edit buttons
$(dlg).find('textarea').attr('data-commentid', ""); // remove the commentID again so a submit will add a new comment again
$(dlg).find('textarea').prop('value', ''); // empty out the textarea again
}
})(jQuery);
