Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #14476 from edx/alisan/post-add-response-focus-TNL-6170

Browse Source 
Discussion thread bring focus to response list after submitting a response or comment
This commit is contained in:
alisan617
2017-02-08 14:06:32 -05:00
committed by GitHub
parent 31ec562168 813e86041c
commit 85ff8a62a2
7 changed files with 36 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
common/static/common/js/discussion/views/discussion_thread_view.js
View File

@@ -62,9 +62,7 @@
DiscussionThreadView.prototype.events = {
'click .discussion-submit-post': 'submitComment',
'click .add-response-btn': 'scrollToAddResponse',
'click .forum-thread-expand': 'expand',
'click .forum-thread-collapse': 'collapse'
'click .add-response-btn': 'scrollToAddResponse'
};
DiscussionThreadView.prototype.$ = function(selector) {
@@ -165,45 +163,6 @@
}
});
DiscussionThreadView.prototype.expand = function(event) {
if (event) {
event.preventDefault();
}
this.$el.addClass('expanded');
this.$el.find('.post-body').text(this.model.get('body'));
this.showView.convertMath();
this.$el.find('.forum-thread-expand').hide();
this.$el.find('.forum-thread-collapse').show();
this.$el.find('.post-extended-content').show();
if (!this.loadedResponses) {
return this.loadInitialResponses();
}
};
DiscussionThreadView.prototype.collapse = function(event) {
if (event) {
event.preventDefault();
}
this.$el.removeClass('expanded');
this.$el.find('.post-body').text(this.getAbbreviatedBody());
this.showView.convertMath();
this.$el.find('.forum-thread-expand').show();
this.$el.find('.forum-thread-collapse').hide();
return this.$el.find('.post-extended-content').hide();
};
DiscussionThreadView.prototype.getAbbreviatedBody = function() {
var abbreviated, cached;
cached = this.model.get('abbreviatedBody');
if (cached) {
return cached;
} else {
abbreviated = DiscussionUtil.abbreviateString(this.model.get('body'), 140);
this.model.set('abbreviatedBody', abbreviated);
return abbreviated;
}
};
DiscussionThreadView.prototype.cleanup = function() {
// jQuery.ajax after 1.5 returns a jqXHR which doesn't implement .abort
// but I don't feel confident enough about what's going on here to remove this code
@@ -346,7 +305,10 @@
view.on('comment:endorse', this.endorseThread);
view.render();
this.$el.find(listSelector).append(view.el);
return view.afterInsert();
view.afterInsert();
if (options.focusAddedResponse) {
this.focusToTheAddedResponse(view.el);
}
};
DiscussionThreadView.prototype.renderAddResponseButton = function() {
@@ -394,7 +356,9 @@
user_id: window.user.get('id')
});
comment.set('thread', this.model.get('thread'));
this.renderResponseToList(comment, '.js-response-list');
this.renderResponseToList(comment, '.js-response-list', {
focusAddedResponse: true
});
this.model.addComment();
this.renderAddResponseButton();
return DiscussionUtil.safeAjax({
@@ -412,6 +376,10 @@
});
};
DiscussionThreadView.prototype.focusToTheAddedResponse = function(list) {
return $(list).attr('tabindex', '-1').focus();
};
DiscussionThreadView.prototype.edit = function() {
this.createEditView();
return this.renderEditView();

5
common/static/common/js/discussion/views/thread_response_view.js
View File

@@ -174,6 +174,7 @@
return self.showCommentForm();
});
this.commentViews.push(view);
this.focusToTheCommentResponse(view.$el.closest('.forum-response'));
return view;
};
@@ -213,6 +214,10 @@
});
};
ThreadResponseView.prototype.focusToTheCommentResponse = function(list) {
return $(list).attr('tabindex', '-1').focus();
};
ThreadResponseView.prototype._delete = function(event) {
var $elem, url;
event.preventDefault();

8
common/static/common/js/spec/discussion/view/discussion_thread_view_spec.js
View File

@@ -27,6 +27,7 @@
$.ajax.calls.reset();
return jasmine.clock().uninstall();
});
renderWithContent = function(view, content) {
$.ajax.and.callFake(function(params) {
params.success(createAjaxResponseJson(content, false), 'success');
@@ -182,6 +183,7 @@
el: $('#fixture-element'),
course_settings: DiscussionSpecHelper.createTestCourseSettings()
});
spyOn($.fn, 'focus');
});
describe('responses', function() {
it('can post a first response', function() {
@@ -189,8 +191,9 @@
postResponse(this.view, 1);
expect(this.view.$('.forum-response').length).toBe(1);
expect(this.view.$('.post-actions-list').find('.action-edit').parent('.is-hidden').length).toBe(1);
return expect(this.view.$('.response-actions-list').find('.action-edit')
expect(this.view.$('.response-actions-list').find('.action-edit')
.parent().not('.is-hidden').length).toBe(1);
expect(document.activeElement === this.view.$('.forum-response')[0]);
});
it('can post a second response', function() {
renderWithTestResponses(this.view, 1);
@@ -201,8 +204,9 @@
postResponse(this.view, 2);
expect(this.view.$('.forum-response').length).toBe(2);
expect(this.view.$('.post-actions-list').find('.action-edit').parent('.is-hidden').length).toBe(1);
return expect(this.view.$('.response-actions-list').find('.action-edit').parent()
expect(this.view.$('.response-actions-list').find('.action-edit').parent()
.not('.is-hidden').length).toBe(2);
expect(document.activeElement === this.view.$('.forum-response')[0]);
});
});
describe('response count and pagination', function() {

7
common/static/common/js/spec/discussion/view/thread_response_view_spec.js
View File

@@ -53,6 +53,13 @@
return checkCommentForm(false);
});
});
describe('submitComment', function() {
it('focus should be in response container after a new comment is posted', function() {
this.view.render();
expect(this.view.$('.comments')).toBeVisible();
expect(document.activeElement === this.view.$('.forum-response')[0]);
});
});
describe('renderComments', function() {
it('hides "show comments" link if collapseComments is not set', function() {
this.view.render();

2
common/static/common/templates/discussion/thread-edit.underscore
View File

@@ -5,7 +5,7 @@
<label class="field-label">
<span class="field-label-text"><%- gettext("Title") %></span>
<div class="field-help" id="field_help_title">
<%- gettext("Add a clear and descriptive title to encourage participation.") %>
<%- gettext("Add a clear and descriptive title to encourage participation. (Required)") %>
</div>
<input aria-describedby="field_help_title" type="text" class="edit-post-title field-input" name="title" value="<%- title %>">
</label>

3
lms/static/sass/discussion/_mixins.scss
View File

@@ -44,16 +44,13 @@
@include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
box-sizing: border-box;
border: 1px solid $forum-color-border;
border-top: none;
width: 100%;
background: $forum-color-background-light;
box-shadow: 0 1px 3px $shadow-l1 inset;
}
@mixin discussion-new-post-wmd-preview-container {
@include discussion-wmd-preview-container;
border-color: $forum-color-border;
box-shadow: 0 1px 3px $shadow-d1 inset;
}
@mixin discussion-wmd-preview-label {

5
lms/static/sass/discussion/elements/_editor.scss
View File

@@ -22,6 +22,11 @@
.wmd-preview-container {
@include discussion-new-post-wmd-preview-container;
.discussion-board &,
.discussion-user-profile-board & {
margin-top: -($baseline / 4);
}
}
.wmd-preview-label {