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 --- web/html/packages.php | 30 ++++++++++++++++++++++++++++++ web/template/pkg_details.php | 4 ++-- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/web/html/packages.php b/web/html/packages.php index bf325cf..466042a 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 ef40f1f..f0bfa0b 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">