Re-work the chanlist applet.

Now orders *all* the channels based on the number of members.
Minimises use of jQuery for performance.

Also, for performance, turns off most of the heavy-lifting for IE. God damn IE sucks.

diff --git a/client/assets/dev/applet_chanlist.js b/client/assets/dev/applet_chanlist.js
index 7b27735a5635911b82b5d5ff1c528ca2cdb1ee82..3e1f8ab64d5227697ef7b3c8afb47f616cf59868 100644 (file)
--- a/client/assets/dev/applet_chanlist.js
+++ b/client/assets/dev/applet_chanlist.js
@@ -11,8 +11,12 @@
 \r
             this.channels = [];\r
 \r
+            // Some of this code makes IE go completely crazy, so we have to browser sniff\r
+            // It's horrible, I know, but otherwise a Very Bad Thing™ will happen.\r
+            this.isIE = navigator.appName === 'Microsoft Internet Explorer';\r
+\r
             // Sort the table by num. users?\r
-            this.ordered = false;\r
+            this.ordered = !this.isIE;\r
 \r
             // Waiting to add the table back into the DOM?\r
             this.waiting = false;\r
@@ -21,18 +25,21 @@
 \r
         render: function () {\r
             var table = $('table', this.$el),\r
-                tbody = table.children('tbody:first').detach();\r
-            /*tbody.children().each(function (child) {\r
-                var i, chan;\r
-                child = $(child);\r
-                chan = child.children('td:first').text();\r
-                for (i = 0; i < chanList.length; i++) {\r
-                    if (chanList[i].channel === chan) {\r
-                        chanList[i].html = child.detach();\r
-                        break;\r
+                tbody = table.children('tbody:first').detach(),\r
+                that = this;\r
+            if (!this.isIE) {\r
+                tbody.children().each(function (idx, child) {\r
+                    var i, chan,\r
+                        channels_length = that.channels.length;\r
+                    chan = $(child.querySelector('.chan')).data('channel');\r
+                    for (i = 0; i < channels_length; i++) {\r
+                        if (that.channels[i].channel === chan) {\r
+                            that.channels[i].dom = tbody[0].removeChild(child);\r
+                            break;\r
+                        }\r
                     }\r
-                }\r
-            });*/\r
+                });\r
+            }\r
 \r
             if (this.ordered) {\r
                 this.channels.sort(function (a, b) {\r
@@ -41,9 +48,9 @@
             }\r
 \r
             _.each(this.channels, function (chan) {\r
-                tbody.append(chan.html);\r
+                tbody[0].appendChild(chan.dom);\r
             });\r
-            table.append(tbody);\r
+            table[0].appendChild(tbody[0]);\r
         }\r
     });\r
 \r
@@ -63,7 +70,6 @@
 \r
         // New channels to add to our list\r
         onListChannel: function (event) {\r
-            console.log(event);\r
             this.addChannel(event.chans);\r
         },\r
 \r
@@ -79,9 +85,32 @@
                 channels = [channels];\r
             }\r
             _.each(channels, function (chan) {\r
-                var html, channel;\r
-                html = '<tr><td><a class="chan" data-channel="' + chan.channel + '">' + _.escape(chan.channel) + '</a></td><td class="num_users" style="text-align: center;">' + chan.num_users + '</td><td style="padding-left: 2em;">' + formatIRCMsg(_.escape(chan.topic)) + '</td></tr>';\r
-                chan.html = html;\r
+                var frag, row, name, chanlink, num_users, topic;\r
+                frag = document.createDocumentFragment();\r
+                row = document.createElement("tr");\r
+                name = document.createElement("td");\r
+                chanlink = document.createElement("a");\r
+                if (typeof chanlink.dataset !== "undefined") {\r
+                    chanlink.dataset.channel = chan.channel;\r
+                } else {\r
+                    chanlink.setAttribute('data-channel', chan.channel);\r
+                }\r
+                chanlink.textContent = _.escape(chan.channel);\r
+                chanlink.classList.add('chan');\r
+                name.appendChild(chanlink);\r
+                row.appendChild(name);\r
+                num_users = document.createElement("td");\r
+                num_users.textContent = chan.num_users;\r
+                num_users.classList.add("num_users");\r
+                num_users.style.textAlign = 'center';\r
+                row.appendChild(num_users);\r
+                topic = document.createElement("td");\r
+                topic.style.paddingLeft = '2em';\r
+                topic.innerHTML = formatIRCMsg(_.escape(chan.topic));\r
+                row.appendChild(topic);\r
+                frag.appendChild(row);\r
+\r
+                chan.dom = frag;\r
                 that.view.channels.push(chan);\r
             });\r
 \r