From a6fbf7d86b9d4d8435846206792b14f9b654cc8f Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Mon, 29 Dec 2014 16:27:41 +1100
Subject: [PATCH] PERF: improve rendering speed of topic header

This also ensures we have a clean point to override rendering of topic list header
in case we decide to add/remove columns, you no longer need to override the
entire discovery template, only the header and item templates.
---
 .../components/sortable-heading.js.es6        | 27 --------
 .../components/topic-list-header.js.es6       | 67 +++++++++++++++++++
 .../templates/components/sortable-heading.hbs |  2 -
 .../discourse/templates/discovery/topics.hbs  | 26 +------
 4 files changed, 68 insertions(+), 54 deletions(-)
 delete mode 100644 app/assets/javascripts/discourse/components/sortable-heading.js.es6
 create mode 100644 app/assets/javascripts/discourse/components/topic-list-header.js.es6
 delete mode 100644 app/assets/javascripts/discourse/templates/components/sortable-heading.hbs

diff --git a/app/assets/javascripts/discourse/components/sortable-heading.js.es6 b/app/assets/javascripts/discourse/components/sortable-heading.js.es6
deleted file mode 100644
index c1f469ecc..000000000
--- a/app/assets/javascripts/discourse/components/sortable-heading.js.es6
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
-  Renders a heading for a table with optional sorting controls.
-
-  @class SortableHeadingComponent
-  @extends Ember.Component
-  @namespace Discourse
-  @module Discourse
-**/
-export default Ember.Component.extend({
-  tagName: 'th',
-  classNameBindings: ['number:num', 'sortBy', 'iconSortClass:sorting', 'sortable:sortable'],
-  attributeBindings: ['colspan'],
-
-  sortable: function() {
-    return this.get('sortBy');
-  }.property('sortBy'),
-
-  iconSortClass: function() {
-    if (this.get('sortable') && this.get('sortBy') === this.get('order')) {
-      return this.get('ascending') ? 'fa fa-chevron-up' : 'fa fa-chevron-down';
-    }
-  }.property('sortable', 'order', 'ascending'),
-
-  click: function() {
-    this.sendAction('action', this.get('sortBy'));
-  }
-});
diff --git a/app/assets/javascripts/discourse/components/topic-list-header.js.es6 b/app/assets/javascripts/discourse/components/topic-list-header.js.es6
new file mode 100644
index 000000000..eb85cf960
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/topic-list-header.js.es6
@@ -0,0 +1,67 @@
+import StringBuffer from 'discourse/mixins/string-buffer';
+
+export default Ember.Component.extend(StringBuffer, {
+  tagName: 'tr',
+
+  rerenderTriggers: ['order', 'ascending'],
+
+  click: function(e) {
+    var target = $(e.target);
+
+    if(target.parents().andSelf().hasClass('bulk-select')){
+      this.sendAction('toggleBulkSelect');
+    } else {
+      var th = target.closest('th.sortable');
+      if(th.length > 0) {
+        this.sendAction('changeSort', th.data('sort-order'));
+      }
+    }
+
+  },
+
+  renderColumn: function(buffer, options){
+    var className = options.sortable ? "sortable " : "";
+    className += options.order || "";
+
+    var sortIcon = "";
+    if(this.get("order") === options.order){
+      className += " sorting";
+      sortIcon = " <i class='fa fa-chevron-" + (this.get('ascending') ? 'up' : 'down') +  "'></i>";
+    }
+
+    if(options.number){
+      className += " num";
+    }
+
+    buffer.push("<th data-sort-order='" + options.order + "' class='"+ className +"'>" + I18n.t(options.name) + sortIcon + "</th>");
+  },
+
+  renderString: function(buffer){
+    var self = this;
+
+    if(this.get('currentUser')){
+      buffer.push("<th class='star'>");
+      if(this.get('canBulkSelect')){
+        var title = I18n.t('topics.bulk.toggle');
+        buffer.push("<button class='btn bulk-select' title='" + title + "'><i class='fa fa-list'></i></button>");
+      }
+      buffer.push("</th>");
+    }
+
+    var column = function(options){
+      self.renderColumn(buffer, options);
+    };
+
+    column({name: 'topic.title', sortable: false, order: 'default'});
+
+    if(!this.get('hideCategory')) {
+      column({name: 'category_title', sortable: true, order: 'category'});
+    }
+
+    column({sortable: false, order: 'posters', name: 'users'});
+    column({sortable: true, order: 'posts', name: 'posts', number: true});
+    column({sortable: true, order: 'views', name: 'views', number: true});
+    column({sortable: true, order: 'activity', name: 'activity', number: true});
+  }
+
+});
diff --git a/app/assets/javascripts/discourse/templates/components/sortable-heading.hbs b/app/assets/javascripts/discourse/templates/components/sortable-heading.hbs
deleted file mode 100644
index 36824ad2b..000000000
--- a/app/assets/javascripts/discourse/templates/components/sortable-heading.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-{{yield}}
-<i {{bind-attr class="iconSortClass"}}></i>
diff --git a/app/assets/javascripts/discourse/templates/discovery/topics.hbs b/app/assets/javascripts/discourse/templates/discovery/topics.hbs
index 23878a1a5..234edfb77 100644
--- a/app/assets/javascripts/discourse/templates/discovery/topics.hbs
+++ b/app/assets/javascripts/discourse/templates/discovery/topics.hbs
@@ -37,31 +37,7 @@
   {{#if hasTopics}}
     <table class='topic-list'>
       <thead>
-        <tr>
-          {{#if currentUser}}
-          <th class='star'>
-            {{#if canBulkSelect}}
-            <button class='btn bulk-select' {{action "toggleBulkSelect"}} title="{{i18n 'topics.bulk.toggle'}}"><i class='fa fa-list'></i></button>
-            {{/if}}
-          </th>
-          {{/if}}
-          {{#sortable-heading class="default"}} {{i18n 'topic.title'}} {{/sortable-heading}}
-          {{#unless controller.hideCategory}}
-            {{#sortable-heading sortBy="category" action="changeSort" order=order ascending=ascending}}
-              {{i18n 'category_title'}}
-            {{/sortable-heading}}
-          {{/unless}}
-          {{#sortable-heading class="posters"}} {{i18n 'users'}} {{/sortable-heading}}
-          {{#sortable-heading sortBy="posts" number=true action="changeSort" order=order ascending=ascending}}
-            {{i18n 'posts'}}
-          {{/sortable-heading}}
-          {{#sortable-heading sortBy="views" number=true action="changeSort" order=order ascending=ascending}}
-            {{i18n 'views'}}
-          {{/sortable-heading}}
-          {{#sortable-heading sortBy="activity" number=true action="changeSort" order=order ascending=ascending}}
-            {{i18n 'activity'}}
-          {{/sortable-heading}}
-        </tr>
+        {{topic-list-header currentUser=currentUser canBulkSelect=canBulkSelect changeSort="changeSort" toggleBulkSelect="toggleBulkSelect" hideCategory=hideCategory order=order ascending=ascending}}
       </thead>
       <tbody>
         {{each content in topics itemController="topic-list-item" itemView="topic-list-item"}}