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>

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 %}