Collapse long dependency lists

Collapse package dependency lists with more than 20 entries and add a
link to show the full list.

The JavaScript code for this originates from the archweb project. Note
that the full list is shown when JavaScript is disabled or unavailable.

Signed-off-by: Lukas Fleischer <archlinux@cryptocrack.de>

2 files changed, 32 insertions, 2 deletions

diff --git a/web/html/packages.php b/web/html/packages.php
index bf325cf3..466042ac 100644
--- a/web/html/packages.php
+++ b/web/html/packages.php
@@ -50,6 +50,36 @@ if (isset($pkgname)) {
 html_header($title, $details);
 ?>
 
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+<script type="text/javascript">
+function collapseDependsList(list) {
+    list = $(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) {
+        return;
+    }
+    items.hide();
+    list.after('<p><a id="' + linkid + '" href="#">Show More…</a></p>');
+
+    // add link and wire it up to show the hidden items
+    $('#' + linkid).click(function(event) {
+        event.preventDefault();
+        list.find('li').show();
+        // remove the full <p/> node from the DOM
+        $(this).parent().remove();
+    });
+}
+
+$(document).ready(function() {
+    collapseDependsList("#pkgdepslist");
+    collapseDependsList("#pkgreqslist");
+});
+</script>
+
 <?php
 if (isset($pkgid)) {
 	include('pkg_search_form.php');
diff --git a/web/template/pkg_details.php b/web/template/pkg_details.php
index ef40f1f6..f0bfa0b8 100644
--- a/web/template/pkg_details.php
+++ b/web/template/pkg_details.php
@@ -218,7 +218,7 @@ if ($row["MaintainerUID"]):
 		<div id="pkgdeps" class="listing">
 			<h3><?= __('Dependencies') . " (" . count($deps) . ")"?></h3>
 <?php if (count($deps) > 0): ?>
-			<ul>
+			<ul id="pkgdepslist">
 <?php while (list($k, $darr) = each($deps)): ?>
 	<li><?= pkg_depend_link($darr[0], $darr[1], $darr[2], $darr[3]); ?></li>
 <?php endwhile; ?>
@@ -228,7 +228,7 @@ if ($row["MaintainerUID"]):
 		<div id="pkgreqs" class="listing">
 			<h3><?= __('Required by') . " (" . count($requiredby) . ")"?></h3>
 <?php if (count($requiredby) > 0): ?>
-			<ul>
+			<ul id="pkgreqslist">
 <?php
 	# darr: (PackageName, PackageID)
 	while (list($k, $darr) = each($requiredby)):