Sortable chanlist.

diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index 475450d349fffdef5de9bb804610f755bf1d1c7d..2215f4b808f2269adeb33dbe61f590e84c08330f 100644 (file)
--- a/client/assets/css/style.css
+++ b/client/assets/css/style.css
@@ -466,3 +466,10 @@ html, body { height:100%; }
     padding: 5px; border-top:1px solid #e9e9e9; background:#ddd; overflow:hidden;
 }
 #kiwi .ui_menu .ui_menu_foot .close { }
+
+#kiwi .applet #chanlist .icon-sort-down:before, #kiwi .applet #chanlist .icon-sort-up:before {
+    padding-left: 1em;
+}
+#kiwi .applet #chanlist td {
+    min-width: 120px;
+}
\ No newline at end of file

diff --git a/client/src/applets/chanlist.js b/client/src/applets/chanlist.js
index 2e909c014fbe8ae2bf61e9bba6c238e0866dd631..d54339d699149dbfa64ae1142316618abf87b8c0 100644 (file)
--- a/client/src/applets/chanlist.js
+++ b/client/src/applets/chanlist.js
@@ -3,47 +3,70 @@
     var View = Backbone.View.extend({\r
         events: {\r
             "click .chan": "chanClick",\r
+            "click #channels_name": "sortChannelsByNameClick",\r
+            "click #users": "sortChannelsByUsersClick"\r
         },\r
 \r
-\r
-\r
+        \r
+        \r
         initialize: function (options) {\r
             var text = {\r
-                channel_name: _kiwi.global.i18n.translate('client_applets_chanlist_channelname').fetch(),\r
-                users: _kiwi.global.i18n.translate('client_applets_chanlist_users').fetch(),\r
+                channel_name: '<a id="channels_name">' + _kiwi.global.i18n.translate('client_applets_chanlist_channelname').fetch() + '</a>',\r
+                users: '<a id="users">' + _kiwi.global.i18n.translate('client_applets_chanlist_users').fetch() + '</a>',\r
                 topic: _kiwi.global.i18n.translate('client_applets_chanlist_topic').fetch()\r
             };\r
             this.$el = $(_.template($('#tmpl_channel_list').html().trim(), text));\r
 \r
             this.channels = [];\r
 \r
-            // Sort the table by num. users?\r
-            this.ordered = true;\r
+            // Sort the table\r
+            this.order = '';\r
+\r
 \r
             // Waiting to add the table back into the DOM?\r
             this.waiting = false;\r
         },\r
 \r
-\r
-        render: function () {\r
+        render: function (override_channels) {\r
             var table = $('table', this.$el),\r
                 tbody = table.children('tbody:first').detach(),\r
                 that = this,\r
                 channels_length = this.channels.length,\r
+                icon_asc = '<span class="icon-sort-up">&nbsp;&nbsp;</span>',\r
+                icon_desc = '<span class="icon-sort-down">&nbsp;&nbsp;</span>',\r
                 i;\r
-\r
+            \r
             tbody.children().each(function (idx, child) {\r
                 if (that.channels[idx].channel === $(child.querySelector('.chan')).data('channel')) {\r
                     that.channels[idx].dom = tbody[0].removeChild(child);\r
                 }\r
             });\r
 \r
-            if (this.ordered) {\r
-                this.channels.sort(function (a, b) {\r
-                    return b.num_users - a.num_users;\r
-                });\r
+            if (override_channels != undefined) {\r
+                that.channels = override_channels;\r
+                tbody.remove();\r
+            } else {\r
+                that.channels = this.sortChannels(this.channels, this.order);\r
             }\r
 \r
+            // Clean the sorting icon and add the new one\r
+            $('#chanlist').find('span').remove();\r
+            switch (this.order) {\r
+                case 'user_desc':\r
+                default:\r
+                    $('#users').append(icon_desc);\r
+                    break;\r
+                case 'user_asc':\r
+                    $('#users').append(icon_asc);\r
+                    break;\r
+                case 'name_asc':\r
+                    $('#channels_name').append(icon_asc);\r
+                    break;\r
+                case 'name_desc':\r
+                    $('#channels_name').append(icon_desc);\r
+                    break;\r
+            }\r
+            \r
             for (i = 0; i < channels_length; i++) {\r
                 tbody[0].appendChild(this.channels[i].dom);\r
             }\r
@@ -58,12 +81,98 @@
                 // IE...\r
                 _kiwi.gateway.join(null, $(event.srcElement).data('channel'));\r
             }\r
+        },\r
+        \r
+        sortChannelsByNameClick: function (event) {\r
+            // Revert the sorting to switch between orders\r
+            switch (this.order) {\r
+                case '':\r
+                case 'name_desc':\r
+                case 'user_asc':\r
+                case 'user_desc':\r
+                default:\r
+                    this.order = 'name_asc';\r
+                    break;\r
+                case 'name_asc':\r
+                    this.order = 'name_desc';\r
+                    break;\r
+            }\r
+            \r
+            this.sortChannelsClick(this.order);\r
+        },\r
+        \r
+        sortChannelsByUsersClick: function (event) {\r
+            // Revert the sorting to switch between orders\r
+            switch (this.order) {\r
+                case 'user_asc':\r
+                case 'name_asc':\r
+                case 'name_desc':\r
+                default:\r
+                    this.order = 'user_desc';\r
+                    break;\r
+                case '':\r
+                case 'user_desc':\r
+                    this.order = 'user_asc';\r
+                    break;\r
+            }\r
+            \r
+            this.sortChannelsClick(this.order);\r
+        },\r
+        \r
+        sortChannelsClick: function(order) {\r
+            var that = this;\r
+            that.channels = this.sortChannels(this.channels, order);\r
+\r
+            this.render(that.channels);\r
+        },\r
+        \r
+        sortChannels: function (channels, order) {\r
+            var counter = 0,\r
+                sort_channels = [];\r
+            \r
+            // First we create a light copy of the channels object to do the sorting\r
+            _.each(this.channels, function (chan) {\r
+                sort_channels.push({'counter': counter, 'num_users': chan.num_users, 'channel': chan.channel});\r
+                \r
+                counter += 1;\r
+            });\r
+            \r
+            // Second, we apply the sorting\r
+            sort_channels.sort(function (a, b) {\r
+                switch (order) {\r
+                    case 'user_asc':\r
+                        return a.num_users - b.num_users;\r
+                        break;\r
+                    case 'user_desc':\r
+                        return b.num_users - a.num_users;\r
+                        break;                \r
+                    case 'name_asc':\r
+                        if (a.channel.toLowerCase() > b.channel.toLowerCase()) return 1;\r
+                        if (a.channel.toLowerCase() < b.channel.toLowerCase()) return -1;\r
+                        break;\r
+                    case 'name_desc':\r
+                        if (a.channel.toLowerCase() < b.channel.toLowerCase()) return 1;\r
+                        if (a.channel.toLowerCase() > b.channel.toLowerCase()) return -1;\r
+                        break;\r
+                    default:\r
+                        return b.num_users - a.num_users;\r
+                        break;\r
+                }\r
+                return 0;\r
+            });\r
+            \r
+            // Third, we re-shuffle the chanlist according to the sort order\r
+            var new_channels = [];\r
+            _.each(sort_channels, function (chan) {\r
+                new_channels.push(channels[chan.counter]);\r
+            });\r
+            \r
+            return new_channels;\r
         }\r
     });\r
 \r
 \r
 \r
-\r
     var Applet = Backbone.Model.extend({\r
         initialize: function () {\r
             this.set('title', _kiwi.global.i18n.translate('client_applets_chanlist_channellist').fetch());\r

diff --git a/client/src/index.html.tmpl b/client/src/index.html.tmpl
index f0d82f5b74b04a0aa5fab55699ecce987bffd62a..f0406de77739ad2f0918633c7cfc25a610b61fd6 100644 (file)
--- a/client/src/index.html.tmpl
+++ b/client/src/index.html.tmpl
@@ -339,7 +339,7 @@
 \r
     <script type="text/html" id="tmpl_channel_list">\r
         <div>\r
-            <table style="margin:1em 2em;">\r
+            <table id="chanlist" style="margin:1em 2em;">\r
                 <thead style="font-weight: bold;">\r
                     <tr>\r
                         <td><%= channel_name %></td>\r