refactor topic list header to use a raw template

This commit is contained in:
Sam 2014-12-31 12:32:43 +11:00
parent 3f0a4b9e52
commit f0ca6150d8
4 changed files with 60 additions and 48 deletions

View file

@ -5,6 +5,8 @@ export default Ember.Component.extend(StringBuffer, {
rerenderTriggers: ['order', 'ascending'],
rawTemplate: 'components/topic-list-header.raw',
click: function(e) {
var target = $(e.target);
@ -18,52 +20,4 @@ export default Ember.Component.extend(StringBuffer, {
}
},
renderColumn: function(buffer, options){
var className = options.sortable ? "sortable " : "";
className += options.order || "";
var sortIcon = "";
if(this.get("order") === options.order && options.sortable){
className += " sorting";
sortIcon = " <i class='fa fa-chevron-" + (this.get('ascending') ? 'up' : 'down') + "'></i>";
}
if(options.number){
className += " num";
}
var name = options.forceName || I18n.t(options.name);
buffer.push("<th data-sort-order='" + options.order + "' class='"+ className +"'>" + 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});
}
});

View file

@ -0,0 +1,5 @@
<th data-sort-order='{{order}}' class='{{view.className}}'>{{view.localizedName}}
{{~#if view.isSorting}}
<i class='{{view.sortClass}}'></i>
{{/if ~}}
</th>

View file

@ -0,0 +1,15 @@
{{#if currentUser}}
<th class='star'>
{{#if canBulkSelect}}
<button class='btn bulk-select' title='{{i18n "topics.bulk.toggle"}}'><i class='fa fa-list'></i></button>
{{/if}}
</th>
{{/if}}
{{raw "components/topic-list-header-column" order='default' name='topic.title'}}
{{#unless parent.hideCategory}}
{{raw "components/topic-list-header-column" sortable='true' order='category' name='category_title'}}
{{/unless}}
{{raw "components/topic-list-header-column" order='posters' name='users'}}
{{raw "components/topic-list-header-column" sortable='true' number='true' order='posts' name='posts'}}
{{raw "components/topic-list-header-column" sortable='true' number='true' order='views' name='views'}}
{{raw "components/topic-list-header-column" sortable='true' number='true' order='activity' name='activity'}}

View file

@ -0,0 +1,38 @@
export default Ember.Object.extend({
localizedName: function(){
if(this.forceName){
return this.forceName;
}
return I18n.t(this.name);
}.property(),
sortClass: function(){
return "fa fa-chevron-" + (this.parent.get("ascending") ? "up" : "down");
}.property(),
isSorting: function(){
return this.sortable && this.parent.get("order") === this.order;
}.property(),
className: function(){
var name = [];
if(this.order){
name.push(this.order);
}
if(this.sortable){
name.push("sortable");
if(this.get("isSorting")){
name.push("sorting");
}
}
if(this.number){
name.push("num");
}
return name.join(' ');
}.property()
});