Convert comment editing to vanilla JavaScript

Signed-off-by: Eli Schwartz <eschwartz@archlinux.org>

web/template/pkg_comments.php

@@ -169,37 +169,71 @@ if ($comment_section == "package") {
 </div>
 
 <script>
-$(document).ready(function() {
+function add_busy_indicator(sibling) {
-	$('.edit-comment').click(function () {
+	const img = document.createElement('img');
-		var parent_element = this.parentElement,
+	img.src = "/images/ajax-loader.gif";
-			parent_id = parent_element.id,
+	img.classList.add('ajax-loader');
-			comment_id = parent_id.substr(parent_id.indexOf('-') + 1),
+	img.style.height = 11;
-			edit_form = $(parent_element).next(),
+	img.style.width = 16;
-			_this = $(this);
+	img.alt = "Busy…";
-		add_busy_indicator(_this);
+
-		$.getJSON('<?= get_uri('/rpc') ?>', {
+	sibling.insertAdjacentElement('afterend', img);
-			type: 'get-comment-form',
+}
+
+function remove_busy_indicator(sibling) {
+	const elem = sibling.nextElementSibling;
+	elem.parentNode.removeChild(elem);
+}
+
+function getParentsUntil(elem, className) {
+	// Limit to 10 depth
+	for ( ; elem && elem !== document; elem = elem.parentNode) {
+		if (elem.matches(className)) {
+			break;
+		}
+	}
+
+	return elem;
+}
+
+function handleEditCommentClick(event) {
+	event.preventDefault();
+	const parent_element = getParentsUntil(event.target, '.comment-header');
+	const parent_id = parent_element.id;
+	const comment_id = parent_id.substr(parent_id.indexOf('-') + 1);
+	// The div class="article-content" which contains the comment
+	const edit_form = parent_element.nextElementSibling;
+
+	const params = new URLSearchParams({
+		type: "get-comment-form",
 		arg: comment_id,
 		base_id: <?= intval($row["PackageBaseID"]) ?>,
 		pkgbase_name: <?= json_encode($pkgbase_name) ?>
-		}, function (data) {
+	});
-			remove_busy_indicator(_this);
+
+	const url = '<?= get_uri('/rpc') ?>' + '?' + params.toString();
+
+	add_busy_indicator(event.target);
+
+	fetch(url, {
+		method: 'GET'
+	})
+	.then(function(response) { return response.json(); })
+	.then(function(data) {
+		remove_busy_indicator(event.target);
 		if (data.success) {
-				edit_form.html(data.form);
+			edit_form.innerHTML = data.form;
-				edit_form.find('textarea').focus();
+			edit_form.querySelector('textarea').focus();
 		} else {
 			alert(data.error);
 		}
 	});
-		return false;
-	});
-
-	function add_busy_indicator(sibling) {
-		sibling.after('<img src="/images/ajax-loader.gif" class="ajax-loader" width="16" height="11" alt="Busy…" />');
 }
 
-	function remove_busy_indicator(sibling) {
+document.addEventListener('DOMContentLoaded', function() {
-		sibling.next().remove();
+	const divs = document.querySelectorAll('.edit-comment');;
+	for (let div of divs) {
+		div.addEventListener('click', handleEditCommentClick);
 	}
 });
 </script>