mirror of
https://github.com/flarum/framework.git
synced 2025-01-09 20:44:05 +08:00
c28307903b
HTMLBars goodness! Since there was some breakage and a lot of fiddling around to get some things working, I took this opportunity to do a big cleanup of the whole Ember app. I accidentally worked on some new features too :3 Note that the app is still broken right now, pending on https://github.com/emberjs/ember.js/issues/10401 Cleanup: - Restructuring of components - Consolidation of some stuff into mixins, cleanup of some APIs that will be public - Change all instances of .property() / .observes() / .on() to Ember.computed() / Ember.observer() / Ember.on() respectively (I think it is more readable) - More comments - Start conforming to a code style (2 spaces for indentation) New features: - Post hiding/restoring - Mark individual discussions as read by clicking - Clicking on a read discussion jumps to the end - Mark all discussions as read - Progressively mark the discussion as read as the page is scrolled - Unordered list post formatting - Post permalink popup Demo once that Ember regression is fixed!
88 lines
3.1 KiB
JavaScript
Executable File
88 lines
3.1 KiB
JavaScript
Executable File
import Ember from 'ember';
|
|
|
|
import HasItemLists from 'flarum/mixins/has-item-lists';
|
|
import FadeIn from 'flarum/mixins/fade-in';
|
|
|
|
/**
|
|
Component for a discussion listing on the discussions index. It has `info`
|
|
and `controls` item lists for a bit of flexibility.
|
|
*/
|
|
export default Ember.Component.extend(FadeIn, HasItemLists, {
|
|
layoutName: 'components/index/discussion-listing',
|
|
tagName: 'li',
|
|
attributeBindings: ['discussionId:data-id'],
|
|
classNames: ['discussion-summary'],
|
|
classNameBindings: [
|
|
'discussion.isUnread:unread',
|
|
'active'
|
|
],
|
|
itemLists: ['info', 'controls'],
|
|
|
|
terminalPostType: 'last',
|
|
countType: 'unread',
|
|
|
|
discussionId: Ember.computed.alias('discussion.id'),
|
|
|
|
active: Ember.computed('childViews.@each.active', function() {
|
|
return this.get('childViews').anyBy('active');
|
|
}),
|
|
|
|
displayUnread: Ember.computed('countType', 'discussion.isUnread', function() {
|
|
return this.get('countType') === 'unread' && this.get('discussion.isUnread');
|
|
}),
|
|
|
|
countTitle: Ember.computed('discussion.isUnread', function() {
|
|
return this.get('discussion.isUnread') ? 'Mark as Read' : '';
|
|
}),
|
|
|
|
displayLastPost: Ember.computed('terminalPostType', 'discussion.repliesCount', function() {
|
|
return this.get('terminalPostType') === 'last' && this.get('discussion.repliesCount');
|
|
}),
|
|
|
|
start: Ember.computed('discussion.lastPostNumber', 'discussion.readNumber', function() {
|
|
return Math.min(this.get('discussion.lastPostNumber'), (this.get('discussion.readNumber') || 0) + 1);
|
|
}),
|
|
|
|
relevantPosts: Ember.computed('discussion.relevantPosts', 'discussion.startPost', 'discussion.lastPost', function() {
|
|
if (this.get('controller.show') !== 'posts') { return []; }
|
|
if (this.get('controller.searchQuery')) {
|
|
return this.get('discussion.relevantPosts');
|
|
} else if (this.get('controller.sort') === 'newest' || this.get('controller.sort') === 'oldest') {
|
|
return [this.get('discussion.startPost')];
|
|
} else {
|
|
return [this.get('discussion.lastPost')];
|
|
}
|
|
}),
|
|
|
|
populateControls: function(items) {
|
|
|
|
},
|
|
|
|
populateInfo: function(items) {
|
|
items.pushObjectWithTag(Ember.Component.extend({
|
|
classNames: ['terminal-post'],
|
|
layoutName: 'components/index/discussion-info/terminal-post',
|
|
discussion: Ember.computed.alias('parent.discussion'),
|
|
displayLastPost: Ember.computed.alias('parent.displayLastPost'),
|
|
}).create({parent: this}), 'terminalPost');
|
|
},
|
|
|
|
actions: {
|
|
// In the template, we render the "controls" dropdown with the contents of
|
|
// the `renderControls` property. This way, when a post is initially
|
|
// rendered, it doesn't have to go to the trouble of rendering the
|
|
// controls right away, which speeds things up. When the dropdown button
|
|
// is clicked, this will fill in the actual controls.
|
|
renderControls: function() {
|
|
this.set('renderControls', this.get('controls'));
|
|
},
|
|
|
|
markAsRead: function() {
|
|
if (this.get('discussion.isUnread')) {
|
|
discussion.set('readNumber', discussion.get('lastPostNumber'));
|
|
discussion.save();
|
|
}
|
|
}
|
|
}
|
|
});
|