mirror of
https://github.com/flarum/framework.git
synced 2024-12-12 14:13:37 +08:00
74e80ea2df
- Write CSS for everything, update templates. - Refactor discussion view. Stream is split into two components (content and scrubber) which have their own responsibilities. - Extract pane functionality into a mixin. - Implement global “back button” system. You give a “paneable” target to the application controller, the back button will modulate its pane-related properties as necessary, and call an action when the button is clicked. - Extract welcome-hero into its own component. - Lots of other general improvements/refactoring. The code is quite well-commented so take a look!
99 lines
3.6 KiB
JavaScript
99 lines
3.6 KiB
JavaScript
import Ember from 'ember';
|
|
|
|
import TaggedArray from '../utils/tagged-array';
|
|
import ActionButton from '../components/ui/controls/action-button';
|
|
import DropdownSplit from '../components/ui/controls/dropdown-split';
|
|
import DropdownButton from '../components/ui/controls/dropdown-button';
|
|
import StreamScrubber from '../components/discussions/stream-scrubber';
|
|
|
|
export default Ember.View.extend(Ember.Evented, {
|
|
|
|
sidebarItems: null,
|
|
|
|
didInsertElement: function() {
|
|
// Create and populate an array of items to be rendered in the sidebar.
|
|
var sidebarItems = TaggedArray.create();
|
|
this.trigger('populateSidebar', sidebarItems);
|
|
this.set('sidebarItems', sidebarItems);
|
|
|
|
// By this stage the discussion controller has initialized the post
|
|
// stream object, and there may or may not be posts loaded into it.
|
|
// Either way, we want to tell our stream content component to jump
|
|
// down to the start position specified in the controller's query
|
|
// params.
|
|
this.loadStreamContentForNewDiscussion();
|
|
|
|
// For that matter, whenever the controller's start query param
|
|
// changes, we want to tell our stream content component to jump down
|
|
// to it.
|
|
this.get('controller').on('startWasChanged', this, this.goToNumber);
|
|
},
|
|
|
|
willDestroyElement: function() {
|
|
this.get('controller').off('startWasChanged', this, this.goToNumber);
|
|
},
|
|
|
|
goToNumber: function(start) {
|
|
// We can only proceed if the controller has loaded the discussion
|
|
// details and the view has been rendered.
|
|
if (this.get('controller.loaded') && this.get('streamContent')) {
|
|
this.get('streamContent').send('goToNumber', start);
|
|
}
|
|
},
|
|
|
|
// ------------------------------------------------------------------------
|
|
// OBSERVERS
|
|
// ------------------------------------------------------------------------
|
|
|
|
// Whenever the controller has switched out the old discussion model for a
|
|
// new one, we want to
|
|
loadStreamContentForNewDiscussion: function() {
|
|
if (this.get('controller.loaded')) {
|
|
this.goToNumber(this.get('controller.start'));
|
|
}
|
|
}.observes('controller.loaded'),
|
|
|
|
// Whenever the model's title changes, we want to update that document's
|
|
// title the reflect the new title.
|
|
updateTitle: function() {
|
|
this.set('controller.controllers.application.pageTitle', this.get('controller.model.title'));
|
|
}.observes('controller.model.title'),
|
|
|
|
// ------------------------------------------------------------------------
|
|
// LISTENERS
|
|
// ------------------------------------------------------------------------
|
|
|
|
populateSidebarDefault: function(sidebar) {
|
|
var controls = TaggedArray.create();
|
|
this.trigger('populateControls', controls);
|
|
sidebar.pushObjectWithTag(DropdownSplit.create({
|
|
items: controls,
|
|
icon: 'reply',
|
|
buttonClass: 'btn-primary'
|
|
}), 'controls');
|
|
|
|
sidebar.pushObjectWithTag(StreamScrubber.create({
|
|
streamContent: this.get('streamContent')
|
|
}), 'scrubber');
|
|
}.on('populateSidebar'),
|
|
|
|
populateControlsDefault: function(controls) {
|
|
var view = this;
|
|
var ReplyItem = ActionButton.extend({
|
|
label: 'Reply',
|
|
icon: 'reply',
|
|
classNameBindings: ['className', 'replying:disabled'],
|
|
replying: function() {
|
|
return this.get('parentController.controllers.composer.showing');
|
|
}.property('parentController.controllers.composer.showing'),
|
|
action: function() {
|
|
var lastPost = $('.posts .item:last');
|
|
$('html, body').animate({scrollTop: lastPost.offset().top + lastPost.outerHeight() - $(window).height() + $('.composer').height() + 19}, 'fast');
|
|
view.get('controller').send('reply');
|
|
},
|
|
parentController: this.get('controller'),
|
|
});
|
|
controls.pushObjectWithTag(ReplyItem.create(), 'reply');
|
|
}.on('populateControls')
|
|
});
|