Collapse long lists of related packages

Just like we did with the rows of depends and required by, collapse down
conflicts, provides, etc. comma-separated lists if they grow too large.

Signed-off-by: Dan McGee <dan@archlinux.org>

3 files changed, 32 insertions, 17 deletions

diff --git a/sitestatic/archweb.js b/sitestatic/archweb.js
index 783f75c6..a42e0208 100644
--- a/sitestatic/archweb.js
+++ b/sitestatic/archweb.js
@@ -206,7 +206,7 @@ function collapseDependsList(list) {
     // enough items, or the link already exists.
     var linkid = list.attr('id') + 'link';
     var items = list.find('li').slice(limit);
-    if (items.length == 0 || $('#' + linkid).length > 0) {
+    if (items.length <= 1 || $('#' + linkid).length > 0) {
         return;
     }
     items.hide();
@@ -221,6 +221,28 @@ function collapseDependsList(list) {
     });
 }
 
+function collapseRelatedTo(elements) {
+    var limit = 5;
+    $(elements).each(function(idx, ele) {
+        ele = $(ele);
+        // Hide everything past a given limit. Don't do anything if we don't
+        // have enough items, or the link already exists.
+        var items = ele.find('span.related').slice(limit);
+        if (items.length <= 1 || ele.find('a.morelink').length > 0) {
+            return;
+        }
+        items.hide();
+        ele.append('<a class="morelink" href="#">More…</a>');
+
+        // add link and wire it up to show the hidden items
+        ele.find('a.morelink').click(function(event) {
+            event.preventDefault();
+            ele.find('span.related').show();
+            $(this).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 5a93ce23..aa073551 100644
--- a/templates/packages/details.html
+++ b/templates/packages/details.html
@@ -97,7 +97,7 @@
         {% with pkg.split_packages as splits %}{% if splits %}
         <tr>
             <th>Split Packages:</th>
-            <td class="wrap">{% for s in splits %}{% pkg_details_link s %}{% if not forloop.last %}, {% endif %}{% endfor %}</td>
+            <td class="wrap relatedto">{% for s in splits %}<span class="related">{% pkg_details_link s %}{% if not forloop.last %}, {% endif %}</span>{% endfor %}</td>
         </tr>
         {% endif %}{% endwith %}
         {% else %}
@@ -134,26 +134,26 @@
         {% with pkg.provides.all as all_related %}{% if all_related %}
         <tr>
             <th>Provides:</th>
-            <td class="wrap">{% include "packages/details_relatedto.html" %}</td>
+            <td class="wrap relatedto">{% include "packages/details_relatedto.html" %}</td>
         </tr>
         {% endif %}{% endwith %}
         {% with pkg.replaces.all as all_related %}{% if all_related %}
         <tr>
             <th>Replaces:</th>
-            <td class="wrap">{% include "packages/details_relatedto.html" %}</td>
+            <td class="wrap relatedto">{% include "packages/details_relatedto.html" %}</td>
         </tr>
         {% endif %}{% endwith %}
         {% with pkg.conflicts.all as all_related %}{% if all_related %}
         <tr>
             <th>Conflicts:</th>
-            <td class="wrap">{% include "packages/details_relatedto.html" %}</td>
+            <td class="wrap relatedto">{% include "packages/details_relatedto.html" %}</td>
         </tr>
         {% endif %}{% endwith %}
         {% with pkg.reverse_conflicts as rev_conflicts %}{% if rev_conflicts %}
         <tr>
             <th>Reverse Conflicts:</th>
-            <td class="wrap">{% for conflict in rev_conflicts %}
-                {% pkg_details_link conflict %}{% if not forloop.last %}, {% endif %}{% endfor %}</td>
+            <td class="wrap relatedto">{% for conflict in rev_conflicts %}
+                <span class="related">{% pkg_details_link conflict %}{% if not forloop.last %}, {% endif %}</span>{% endfor %}</td>
         </tr>
         {% endif %}{% endwith %}
         <tr>
@@ -237,6 +237,7 @@ $(document).ready(function() {
         ajaxifyFiles();
         collapseDependsList("#pkgdepslist");
         collapseDependsList("#pkgreqslist");
+        collapseRelatedTo(".relatedto");
 });
 </script>
 {% endblock %}
diff --git a/templates/packages/details_relatedto.html b/templates/packages/details_relatedto.html
index 1ffe2884..e14375d3 100644
--- a/templates/packages/details_relatedto.html
+++ b/templates/packages/details_relatedto.html
@@ -1,10 +1,2 @@
-{% load package_extras %}
-{% for related in all_related %}
-{% with related.get_best_satisfier as best_satisfier %}
-{% ifequal best_satisfier None %}
-{{ related.name }}{{ related.comparison|default:"" }}{{ related.version|default:"" }}{% if not forloop.last %}, {% endif %}
-{% else %}
-{% pkg_details_link best_satisfier %}{{ related.comparison|default:"" }}{{related.version|default:"" }}{% if not forloop.last %}, {% endif %}
-{% endifequal %}
-{% endwith %}
-{% endfor %}
+{% load package_extras %}{% for related in all_related %}{% with related.get_best_satisfier as best_satisfier %}<span class="related">{% ifequal best_satisfier None %}{{ related.name }}{% else %}{% pkg_details_link best_satisfier %}{% endifequal %}{{ related.comparison|default:"" }}{{ related.version|default:"" }}{% if not forloop.last %}, {% endif %}</span>
+{% endwith %}{% endfor %}