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>

1 files changed, 30 insertions, 0 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');