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>
This commit is contained in:
Lukas Fleischer 2014-04-18 23:56:06 +02:00
parent 0f45e98a08
commit e582cfe182
2 changed files with 32 additions and 2 deletions

View file

@ -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');