Skip to content

E
edx-platform
Commit c655c5a6 by Brian Jacobel
Options

Add new DiscussionInlineView which uses DiscussionThreadListView

parent 388ed865
Showing with 191 additions and 28 deletions
common/lib/xmodule/xmodule/js/src/discussion/display.coffee
class @InlineDiscussion extends XModule.Descriptor
constructor: (element) ->
@el = $(element).find('.discussion-module')
@view = new DiscussionModuleView(el: @el)
@view = new DiscussionInlineView(el: @el)
common/static/common/js/discussion/views/discussion_inline_view.js 0 → 100644
/* globals
_, Backbone, Content, Discussion, DiscussionUtil, DiscussionUser, DiscussionCourseSettings,
DiscussionThreadListView, NewPostView
*/
(function() {
'use strict';
this.DiscussionInlineView = Backbone.View.extend({
events: {
'click .discussion-show': 'toggleDiscussion',
'keydown .discussion-show': function(event) {
return DiscussionUtil.activateOnSpace(event, this.toggleDiscussion);
},
'click .new-post-btn': 'toggleNewPost',
'keydown .new-post-btn': function(event) {
return DiscussionUtil.activateOnSpace(event, this.toggleNewPost);
}
},
initialize: function(options) {
this.$el = options.el;
this.toggleDiscussionBtn = this.$('.discussion-show');
this.newPostForm = this.$el.find('.new-post-article');
this.listenTo(this.newPostView, 'newPost:cancel', this.hideNewPost);
},
loadDiscussions: function($elem, error) {
var discussionId = this.$el.data('discussion-id'),
url = DiscussionUtil.urlFor('retrieve_discussion', discussionId) + ('?page=' + this.page),
self = this;
DiscussionUtil.safeAjax({
$elem: this.$el,
$loading: this.$el,
takeFocus: true,
url: url,
type: 'GET',
dataType: 'json',
success: function(response, textStatus) {
self.renderDiscussion(self.$el, response, textStatus, discussionId);
},
error: error
});
},
renderDiscussion: function($elem, response, textStatus, discussionId) {
var $discussion,
user = new DiscussionUser(response.user_info),
self = this;
$elem.focus();
window.user = user;
DiscussionUtil.setUser(user);
Content.loadContentInfos(response.annotated_content_info);
DiscussionUtil.loadRoles(response.roles);
this.course_settings = new DiscussionCourseSettings(response.course_settings);
this.discussion = new Discussion();
this.discussion.reset(response.discussion_data, {
silent: false
});
$discussion = _.template($('#inline-discussion-template').html())({
threads: response.discussion_data,
read_only: this.readOnly,
discussionId: discussionId
});
if (this.$('section.discussion').length) {
this.$('section.discussion').replaceWith($discussion);
} else {
this.$el.append($discussion);
}
this.threadListView = new DiscussionThreadListView({
el: this.$('section.threads'),
collection: self.discussion,
courseSettings: self.course_settings
});
this.threadListView.render();
DiscussionUtil.bulkUpdateContentInfo(window.$$annotated_content_info);
this.newPostForm = this.$el.find('.new-post-article');
this.newPostView = new NewPostView({
el: this.newPostForm,
collection: this.discussion,
course_settings: this.course_settings,
topicId: discussionId,
is_commentable_cohorted: response.is_commentable_cohorted
});
this.newPostView.render();
this.listenTo(this.newPostView, 'newPost:cancel', this.hideNewPost);
this.discussion.on('add', this.addThread);
this.retrieved = true;
this.showed = true;
if (this.isWaitingOnNewPost) {
this.newPostForm.show().focus();
}
},
toggleDiscussion: function() {
var self = this;
if (this.showed) {
this.hideDiscussion();
} else {
this.toggleDiscussionBtn.addClass('shown');
this.toggleDiscussionBtn.find('.button-text').html(gettext('Hide Discussion'));
if (this.retrieved) {
this.$('section.discussion').slideDown();
this.showed = true;
} else {
this.loadDiscussions(this.$el, function() {
self.hideDiscussion();
DiscussionUtil.discussionAlert(
gettext('Sorry'),
gettext('We had some trouble loading the discussion. Please try again.')
);
});
}
}
},
hideDiscussion: function() {
this.$('section.discussion').slideUp();
this.toggleDiscussionBtn.removeClass('shown');
this.toggleDiscussionBtn.find('.button-text').html(gettext('Show Discussion'));
this.showed = false;
},
toggleNewPost: function(event) {
event.preventDefault();
if (!this.newPostForm) {
this.toggleDiscussion();
this.isWaitingOnNewPost = true;
return;
}
if (this.showed) {
this.newPostForm.slideDown(300);
} else {
this.newPostForm.show().focus();
}
this.toggleDiscussionBtn.addClass('shown');
this.toggleDiscussionBtn.find('.button-text').html(gettext('Hide Discussion'));
this.$('section.discussion').slideDown();
this.showed = true;
},
hideNewPost: function() {
return this.newPostForm.slideUp(300);
}
});
}).call(window);
common/static/common/templates/discussion/inline-discussion.underscore
......@@ -6,12 +6,5 @@
<article class="new-post-article"></article>
<section class="threads">
<% _.each(threads, function(thread) { %>
<article class="discussion-thread" id="thread_<%= thread.id %>">
</article>
<% }); %>
</section>
<section class="discussion-pagination">
</section>
</section>
lms/djangoapps/teams/static/teams/js/views/team_discussion.js
......@@ -3,21 +3,18 @@
*/
(function(define) {
'use strict';
define(['backbone', 'underscore', 'gettext', 'common/js/discussion/discussion_module_view'],
function(Backbone, _, gettext, DiscussionModuleView) {
define(['backbone', 'underscore', 'gettext', 'common/js/discussion/views/discussion_inline_view'],
function(Backbone, _, gettext, DiscussionInlineView) {
var TeamDiscussionView = Backbone.View.extend({
initialize: function() {
window.$$course_id = this.$el.data('course-id');
},
render: function() {
var discussionModuleView = new DiscussionModuleView({
el: this.$el,
readOnly: this.$el.data('read-only') === true,
context: 'standalone'
var discussionInlineView = new DiscussionInlineView({
el: this.$el
});
discussionModuleView.render();
discussionModuleView.loadPage(this.$el);
discussionInlineView.render();
return this;
}
});
......
lms/static/lms/js/build.js
......@@ -79,7 +79,7 @@
'logger': 'empty:',
'utility': 'empty:',
'URI': 'empty:',
'common/js/discussion/discussion_module_view': 'empty:',
'common/js/discussion/views/discussion_inline_view': 'empty:',
'modernizr': 'empty',
// Don't bundle UI Toolkit helpers as they are loaded into the "edx" namespace
......
lms/static/lms/js/spec/main.js
......@@ -642,7 +642,7 @@
],
exports: 'ThreadResponseView'
},
'common/js/discussion/discussion_module_view': {
'common/js/discussion/views/discussion_inline_view': {
deps: [
'jquery',
'underscore',
......@@ -666,7 +666,7 @@
'common/js/discussion/views/thread_response_show_view',
'common/js/discussion/views/thread_response_view'
],
exports: 'DiscussionModuleView'
exports: 'DiscussionInlineView'
},
'common/js/spec_helpers/discussion_spec_helper': {
deps: [
......
lms/static/sass/discussion/_discussion.scss
......@@ -324,12 +324,17 @@ body.discussion {
.add_post_btn_container {
@include text-align(right);
position: relative;
top: -45px;
top: -25px;
}
.discussion {
&.inline-discussion {
padding-top: $baseline * 3;
padding-top: $baseline * 1.5;
section.threads {
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
}
}
}
......
lms/static/sass/discussion/elements/_navigation.scss
......@@ -193,6 +193,12 @@
}
}
// Overrides underspecific style from courseware css:
// https://github.com/edx/edx-platform/blob/master/lms/static/sass/course/courseware/_courseware.scss#L402
.course-wrapper .course-content .forum-nav-thread-list li {
margin: 0;
}
.forum-nav-thread {
border-bottom: 1px solid $forum-color-border;
background-color: $forum-color-background;
......
lms/templates/discussion/_discussion_inline.html
<%page expression_filter="h"/>
<%include file="_underscore_templates.html" />
<%include file="_thread_list_template.html" />
<%!
from django.utils.translation import ugettext as _
......@@ -21,13 +22,10 @@ from openedx.core.djangolib.js_utils import js_escaped_string
</button>
</div>
<script type="text/javascript">
/* global DiscussionModuleView */
/* exported DiscussionInlineBlock, $$course_id */
var $$course_id = "${course_id | n, js_escaped_string}";
function DiscussionInlineBlock(runtime, element) {
'use strict';
var el = $(element).find('.discussion-module');
new DiscussionModuleView({ el: el });
new DiscussionInlineView({ el: $(element).find('.discussion-module') });
}
</script>
lms/templates/discussion/_js_body_dependencies.html
......@@ -17,7 +17,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
discussion_classes = [
['Discussion', 'common/js/discussion/discussion'],
['Content', 'common/js/discussion/content'],
['DiscussionModuleView', 'common/js/discussion/discussion_module_view'],
['DiscussionInlineView', 'common/js/discussion/views/discussion_inline_view'],
['DiscussionThreadView', 'common/js/discussion/views/discussion_thread_view'],
['DiscussionThreadListView', 'common/js/discussion/views/discussion_thread_list_view'],
['DiscussionThreadProfileView', 'common/js/discussion/views/discussion_thread_profile_view'],
......
lms/templates/discussion/_thread_list_template.html
<%page expression_filter="h"/>
<%! from django.utils.translation import ugettext as _ %>
<script type="text/template" id="thread-list-template">
<div class="forum-nav-thread-list-wrapper" id="sort-filter-wrapper" tabindex="-1" style="display:none">
<div class="forum-nav-thread-list-wrapper" id="sort-filter-wrapper" tabindex="-1">
<div class="forum-nav-refine-bar">
<label class="forum-nav-filter-main">
## Translators: This labels a filter menu in forum navigation
......@@ -26,7 +26,8 @@
<span class="sr">${_("Cohort:")}</span>
<select class="forum-nav-filter-cohort-control">
<option value="">${_("in all cohorts")}</option>
%for c in cohorts:
## cohorts is not iterable sometimes because inline discussions xmodule doesn't pass it
%for c in (cohorts or []):
<option value="${c['id']}">${c['name']}</option>
%endfor
</select>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment