Make user page multi list multi-column and summarized.

Borrows a modified version of r.ui.Summarize, originally written for
another project by @spladug.

r2/r2/lib/strings.py

@@ -217,6 +217,8 @@ Note: there are a couple of places outside of your subreddit where someone can c
     awesomeness_goes_here = _('awesomeness goes here'),
     add_multi_sr = _('add a subreddit to your multi.'),
     open_multi = _('open this multi'),
+    summarize_and_n_more = _('… and %(count)s more ⇒'),
+    summarize_less = _('⇐ less'),
 )
 
 class StringHandler(object):

r2/r2/public/static/css/reddit.less

@@ -5096,6 +5096,23 @@ table.calendar {
     margin-left: 5px;
 }
 
+#side-multi-list {
+    li {
+        display: inline-block;
+        width: 7.5em;
+        margin-right: .5em;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    & + .expand-summary {
+        padding: 0 4px;
+        margin: 0;
+        margin-top: 3px;
+        font-size: x-small;
+    }
+}
+
 .confirm-button .confirmation {
     color: red;
     white-space: nowrap;

r2/r2/public/static/js/uibase.js

@@ -42,6 +42,55 @@ r.ui.Collapse.prototype = {
     }
 }
 
+r.ui.Summarize = function(el, maxCount) {
+    r.ui.Base.call(this, el)
+    this.maxCount = maxCount
+
+    this._updateItems()
+    if (this.$hiddenItems.length > 0) {
+        this.$toggleButton = $('<button class="expand-summary">')
+            .click($.proxy(this, '_toggle'))
+        this.$el.after(this.$toggleButton)
+        this._summarize()
+    }
+}
+r.ui.Summarize.prototype = {
+    _updateItems: function() {
+        var $important = this.$el.children('.important'),
+            $unimportant = this.$el.children(':not(.important)'),
+            unimportantToShow = this.maxCount
+                                ? Math.max(0, this.maxCount - $important.length)
+                                : 0,
+            $unimportantToShow = $unimportant.slice(0, unimportantToShow - 1)
+
+        this.$summaryItems = $important.add($unimportantToShow)
+        this.$hiddenItems = $unimportant.slice(unimportantToShow)
+    },
+
+    _summarize: function() {
+        this.$el.addClass('summarized')
+        this.$hiddenItems.hide()
+        this.$toggleButton.html(r.strings('summarize_and_n_more', {
+            count: this.$hiddenItems.length
+        }))
+    },
+
+    _expand: function() {
+        this.$el.removeClass('summarized')
+        this.$hiddenItems.show()
+        this.$toggleButton.html(r.strings('summarize_less'))
+    },
+
+    _toggle: function(e) {
+        if (this.$el.hasClass('summarized')) {
+            this._expand()
+        } else {
+            this._summarize()
+        }
+        e.preventDefault()
+    }
+};
+
 r.ui.collapseListingChooser = function() {
     if (store.get('ui.collapse.listingchooser') == true) {
         $('body').addClass('listing-chooser-collapsed')

r2/r2/templates/sidebarmultilist.html

@@ -20,8 +20,10 @@
 ## reddit Inc. All Rights Reserved.
 ###############################################################################
 
-<ul>
+<ul id="side-multi-list">
 %for multi in thing.multis:
   <li><a href="${multi.path}">${multi.name}</a></li>
 %endfor
 </ul>
+
+<script>new r.ui.Summarize($('#side-multi-list'), 15)</script>