2015-01-16 14:56:10 +08:00
|
|
|
import Ember from 'ember';
|
|
|
|
|
|
|
|
import DropdownSelect from '../components/ui/controls/dropdown-select';
|
|
|
|
import ActionButton from '../components/ui/controls/action-button';
|
|
|
|
import NavItem from '../components/ui/items/nav-item';
|
|
|
|
import TaggedArray from '../utils/tagged-array';
|
|
|
|
|
2015-01-21 11:59:00 +08:00
|
|
|
var $ = Ember.$;
|
|
|
|
|
2015-01-16 14:56:10 +08:00
|
|
|
export default Ember.View.extend({
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
// Affix the sidebar so that when the user scrolls down it will stick
|
|
|
|
// to the top of their viewport.
|
2015-02-06 08:06:16 +08:00
|
|
|
var $sidebar = this.$('.index-nav');
|
2015-01-16 14:56:10 +08:00
|
|
|
$sidebar.find('> ul').affix({
|
|
|
|
offset: {
|
|
|
|
top: function () {
|
|
|
|
return $sidebar.offset().top - $('#header').outerHeight(true) - parseInt($sidebar.css('margin-top'));
|
|
|
|
},
|
|
|
|
bottom: function () {
|
2015-01-21 11:59:00 +08:00
|
|
|
return (this.bottom = $('#footer').outerHeight(true));
|
2015-01-16 14:56:10 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// When viewing a discussion (for which the discussions route is the
|
|
|
|
// parent,) the discussion list is still rendered but it becomes a
|
|
|
|
// pane hidden on the side of the screen. When the mouse enters and
|
|
|
|
// leaves the discussions pane, we want to show and hide the pane
|
|
|
|
// respectively. We also create a 10px 'hot edge' on the left of the
|
|
|
|
// screen to activate the pane.
|
|
|
|
var controller = this.get('controller');
|
|
|
|
this.$('.index-area').hover(function() {
|
|
|
|
controller.send('showPane');
|
|
|
|
}, function() {
|
|
|
|
controller.send('hidePane');
|
|
|
|
});
|
|
|
|
$(document).on('mousemove.showPane', function(e) {
|
|
|
|
if (e.pageX < 10) {
|
|
|
|
controller.send('showPane');
|
|
|
|
}
|
2015-02-06 08:06:16 +08:00
|
|
|
});
|
2015-01-16 14:56:10 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
willDestroyElement: function() {
|
|
|
|
$(document).off('mousemove.showPane');
|
|
|
|
},
|
|
|
|
|
2015-02-06 08:06:16 +08:00
|
|
|
scrollToDiscussion: function() {
|
2015-02-08 13:27:33 +08:00
|
|
|
if (this.get('controller.paned')) {
|
|
|
|
var view = this;
|
|
|
|
Ember.run.scheduleOnce('afterRender', function() {
|
|
|
|
var $index = view.$('.index-area');
|
|
|
|
var $discussion = $index.find('.discussion-summary.active');
|
|
|
|
if ($discussion.length) {
|
|
|
|
var indexTop = $index.offset().top;
|
|
|
|
var discussionTop = $discussion.offset().top;
|
|
|
|
if (discussionTop < indexTop || discussionTop + $discussion.outerHeight() > indexTop + $index.outerHeight()) {
|
|
|
|
$index.scrollTop($index.scrollTop() - indexTop + discussionTop);
|
|
|
|
}
|
2015-02-06 08:06:16 +08:00
|
|
|
}
|
2015-02-08 13:27:33 +08:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}.observes('controller.paned'),
|
2015-02-06 08:06:16 +08:00
|
|
|
|
2015-01-16 14:56:10 +08:00
|
|
|
populateSidebarDefault: function(sidebar) {
|
2015-02-06 11:37:15 +08:00
|
|
|
var view = this;
|
2015-01-16 14:56:10 +08:00
|
|
|
var newDiscussion = ActionButton.create({
|
|
|
|
label: 'Start a Discussion',
|
|
|
|
icon: 'edit',
|
2015-02-06 11:37:15 +08:00
|
|
|
className: 'btn btn-primary new-discussion',
|
|
|
|
action: function() {
|
|
|
|
view.get('controller').send('newDiscussion');
|
|
|
|
}
|
2015-01-21 11:59:00 +08:00
|
|
|
});
|
2015-01-16 14:56:10 +08:00
|
|
|
sidebar.pushObjectWithTag(newDiscussion, 'newDiscussion');
|
|
|
|
|
|
|
|
var nav = TaggedArray.create();
|
|
|
|
this.trigger('populateNav', nav);
|
|
|
|
sidebar.pushObjectWithTag(DropdownSelect.create({
|
|
|
|
items: nav
|
|
|
|
}), 'nav');
|
|
|
|
}.on('populateSidebar'),
|
|
|
|
|
|
|
|
populateNavDefault: function(nav) {
|
|
|
|
nav.pushObjectWithTag(NavItem.create({
|
|
|
|
label: 'All Discussions',
|
|
|
|
icon: 'comments-o',
|
|
|
|
linkTo: '"index" (query-params filter="")'
|
|
|
|
}), 'all');
|
|
|
|
|
|
|
|
// The below items are just temporary; they will be extracted into
|
|
|
|
// extensions in the future.
|
|
|
|
nav.pushObjectWithTag(NavItem.create({
|
|
|
|
label: 'Private',
|
|
|
|
icon: 'envelope-o',
|
|
|
|
linkTo: '"index" (query-params filter="private")'
|
|
|
|
}), 'private');
|
|
|
|
|
|
|
|
nav.pushObjectWithTag(NavItem.create({
|
|
|
|
label: 'Following',
|
|
|
|
icon: 'star',
|
|
|
|
linkTo: '"index" (query-params filter="following")'
|
|
|
|
}), 'following');
|
|
|
|
}.on('populateNav')
|
|
|
|
});
|