summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDan McGee <dan@archlinux.org>2012-07-05 17:36:22 -0500
committerDan McGee <dan@archlinux.org>2012-07-05 17:36:22 -0500
commitca86b8d339ff3b8e74ac6d2ccf8a14458a690cf5 (patch)
tree360889bbd4c74a3a6843e334da9ed207ac0761fe
parent909cb9a209b4a4db00232b3a62656f95c4b88d45 (diff)
Collapse the dependencies and required by lists when they are long
For now, this happens when the lists are over 20 items. Using JS, hide the 21st and following packages listed in the list and replace them with a 'Show More...' link that users can click to get the full list. For a package such as glibc with 444 'Required By' entries, this can make quite a visual difference. Signed-off-by: Dan McGee <dan@archlinux.org>
-rw-r--r--sitestatic/archweb.js26
-rw-r--r--templates/packages/details.html10
2 files changed, 31 insertions, 5 deletions
diff --git a/sitestatic/archweb.js b/sitestatic/archweb.js
index 248be7a6..12b7c702 100644
--- a/sitestatic/archweb.js
+++ b/sitestatic/archweb.js
@@ -126,9 +126,9 @@ if (typeof $.tablesorter !== 'undefined') {
(function($) {
$.fn.enableCheckboxRangeSelection = function() {
var lastCheckbox = null;
- var lastElement = null;
+ var lastElement = null;
- var spec = this;
+ var spec = this;
spec.unbind("click.checkboxrange");
spec.bind("click.checkboxrange", function(e) {
if (lastCheckbox != null && e.shiftKey) {
@@ -170,6 +170,28 @@ function ajaxifyFiles() {
});
}
+function collapseDependsList(list) {
+ var limit = 20;
+ // hide everything past a given limit, but don't do anything if we don't
+ // enough items that it is worth adding the link
+ list = $(list);
+ var items = list.find('li').slice(limit);
+ if (items.length == 0) {
+ return;
+ }
+ items.hide();
+ var linkid = list.attr('id') + 'link';
+ list.after('<p><a id="' + linkid + '" href="#">Show Moreā€¦</a></p>');
+
+ // add links and wire them 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();
+ });
+}
+
/* packages/differences.html */
function filter_packages() {
/* start with all rows, and then remove ones we shouldn't show */
diff --git a/templates/packages/details.html b/templates/packages/details.html
index 358ab525..201e3074 100644
--- a/templates/packages/details.html
+++ b/templates/packages/details.html
@@ -186,7 +186,7 @@
<div id="pkgdeps" class="listing">
<h3 title="{{ pkg.pkgname }} has the following dependencies">
Dependencies ({{deps|length}})</h3>
- {% if deps %}<ul>
+ {% if deps %}<ul id="pkgdepslist">
{% for depend in deps %}{% include "packages/details_depend.html" %}{% endfor %}
</ul>{% endif %}
</div>
@@ -196,7 +196,7 @@
<div id="pkgreqs" class="listing">
<h3 title="Packages that require {{ pkg.pkgname }}">
Required By ({{rqdby|length}})</h3>
- {% if rqdby %}<ul>
+ {% if rqdby %}<ul id="pkgreqslist">
{% for req in rqdby %}{% include "packages/details_requiredby.html" %}{% endfor %}
</ul>{% endif %}
</div>
@@ -219,6 +219,10 @@
{% load cdn %}{% jquery %}
<script type="text/javascript" src="{% static "archweb.js" %}"></script>
<script type="text/javascript">
-$(document).ready(ajaxifyFiles);
+$(document).ready(function() {
+ ajaxifyFiles();
+ collapseDependsList("#pkgdepslist");
+ collapseDependsList("#pkgreqslist");
+});
</script>
{% endblock %}