From d7603fa4d3d31e8c50b2988730652809ae1f42b7 Mon Sep 17 00:00:00 2001
From: Jelle van der Waa <jelle@archlinux.org>
Date: Mon, 10 May 2021 23:55:36 +0200
Subject: [PATCH] Port package details page to pure JavaScript

Use a CSS animation for jQuery.Animate and replace the rest with pure
vanilla JavaScript.

Signed-off-by: Eli Schwartz <eschwartz@archlinux.org>
---
 web/html/css/aurweb.css |  5 +++
 web/html/packages.php   | 96 +++++++++++++++++++++++++----------------
 2 files changed, 65 insertions(+), 36 deletions(-)

diff --git a/web/html/css/aurweb.css b/web/html/css/aurweb.css
index 81bf9ab6..bb4e3ad7 100644
--- a/web/html/css/aurweb.css
+++ b/web/html/css/aurweb.css
@@ -199,3 +199,8 @@ label.confirmation,
 .error {
 	color: red;
 }
+
+.article-content > div {
+	overflow: hidden;
+	transition: height 1s;
+}
diff --git a/web/html/packages.php b/web/html/packages.php
index a989428e..559a8f45 100644
--- a/web/html/packages.php
+++ b/web/html/packages.php
@@ -46,70 +46,94 @@ if (isset($pkgname)) {
 html_header($title, $details);
 ?>
 
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
 function collapseDependsList(list) {
-	list = $(list);
+	list = document.getElementById(list);
+
 	// Hide everything past a given limit. Don't do anything if we don't have
 	// enough items, or the link already exists.
-	var limit = 20,
-		linkid = list.attr('id') + 'link',
-		items = list.find('li').slice(limit);
-	if (items.length <= 1 || $('#' + linkid).length > 0) {
+	const limit = 20;
+	const linkid = list.getAttribute('id') + 'link';
+	const items = Array.from(list.querySelectorAll('li')).slice(limit);
+	if (items.length <= 1 || document.getElementById(linkid)) {
 		return;
 	}
-	items.hide();
-	list.after('<p><a id="' + linkid + '" href="#">Show More…</a></p>');
+
+	items.forEach(function(item) {
+		item.style.display = 'none';
+	});
+
+	const link = document.createElement('a');
+	link.id = linkid;
+	link.href = '#';
+	link.textContent = 'Show More…';
+
+	const showMore = document.createElement('p');
+	showMore.appendChild(link);
+
+	list.insertAdjacentElement('afterend', showMore);
 
 	// add link and wire it up to show the hidden items
-	$('#' + linkid).click(function(event) {
+	link.addEventListener('click', function(event) {
 		event.preventDefault();
-		list.find('li').show();
+
+		items.forEach(function(item) {
+			item.style.display = '';
+		});
+
 		// remove the full <p/> node from the DOM
-		$(this).parent().remove();
+		event.target.parentNode.removeChild(event.target);
 	});
 }
 
 function collapseComment(div) {
-	var linkid = div.attr('id') + 'link',
-		inner = div.find('div'),
-		height = inner.height(),
-		maxheight = 200;
+	const linkid = div.getAttribute('id') + 'link';
+	const inner = div.querySelector('div');
+	// max height of a collapsed comment.
+	const maxheight = 200;
+	const height = inner.offsetHeight;
 
 	if (height <= maxheight)
 		return;
 
-	inner.css({ 'overflow': 'hidden', 'height': maxheight + 'px' });
-	inner.addClass('collapsed');
-	inner.after('<p><a id="' + linkid + '" href="#">Show More…</a></p>');
+	inner.style.height = maxheight + 'px';
+	inner.classList.add('collapsed');
 
-	$('#' + linkid).click(function(event) {
-		var inner = $(this).parent().parent().find('div');
+	const link = document.createElement('a');
+	link.id = linkid;
+	link.href = '#';
+	link.textContent = 'Show More…';
+
+	const showMore = document.createElement('p');
+	showMore.appendChild(link);
+
+	inner.insertAdjacentElement('afterend', showMore);
+
+	link.addEventListener('click', function(event) {
+		const showMoreLink = event.target;
+		const inner = showMoreLink.parentNode.parentNode.querySelector('div');
 		var newheight;
 
-		if (inner.hasClass('collapsed')) {
-			inner.css({ 'height': 'auto' });
-			newheight = inner.height();
-			inner.css({ 'height': maxheight });
-			$(this).text('Collapse');
+		if (inner.classList.contains('collapsed')) {
+			inner.style.height = height + 'px';
+			showMoreLink.textContent = 'Collapse';
 		} else {
-			newheight = maxheight;
-			$(this).text('Show More…');
+			newheight = maxheight + 'px';
+			inner.style.height = newheight;
+			showMoreLink.textContent = 'Show More…';
 		}
 
-		inner.animate({ 'height': newheight });
-		inner.toggleClass('collapsed');
+		inner.classList.toggle('collapsed');
 		event.preventDefault();
 	});
 }
 
-$(document).ready(function() {
-	collapseDependsList("#pkgdepslist");
-	collapseDependsList("#pkgreqslist");
-	collapseDependsList("#pkgsrcslist");
-	$(".article-content").each(function() {
-		collapseComment($(this));
-	});
+document.addEventListener('DOMContentLoaded', function() {
+	collapseDependsList("pkgdepslist");
+	collapseDependsList("pkgreqslist");
+	collapseDependsList("pkgsrcslist");
+
+	Array.from(document.querySelectorAll('.article-content')).forEach(collapseComment);
 });
 </script>