From 813e86041c0631c517d75a7cfb5949498865b333 Mon Sep 17 00:00:00 2001 From: alisan617 Date: Fri, 3 Feb 2017 13:57:08 -0500 Subject: [PATCH] Bring focus to response list after submitting a response or comment --- .../views/discussion_thread_view.js | 56 ++++--------------- .../discussion/views/thread_response_view.js | 5 ++ .../view/discussion_thread_view_spec.js | 8 ++- .../view/thread_response_view_spec.js | 7 +++ .../discussion/thread-edit.underscore | 2 +- lms/static/sass/discussion/_mixins.scss | 3 - .../sass/discussion/elements/_editor.scss | 5 ++ 7 files changed, 36 insertions(+), 50 deletions(-) diff --git a/common/static/common/js/discussion/views/discussion_thread_view.js b/common/static/common/js/discussion/views/discussion_thread_view.js index e531523044..76a1ead648 100644 --- a/common/static/common/js/discussion/views/discussion_thread_view.js +++ b/common/static/common/js/discussion/views/discussion_thread_view.js @@ -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(); diff --git a/common/static/common/js/discussion/views/thread_response_view.js b/common/static/common/js/discussion/views/thread_response_view.js index 0df491b7ca..88f895665a 100644 --- a/common/static/common/js/discussion/views/thread_response_view.js +++ b/common/static/common/js/discussion/views/thread_response_view.js @@ -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(); diff --git a/common/static/common/js/spec/discussion/view/discussion_thread_view_spec.js b/common/static/common/js/spec/discussion/view/discussion_thread_view_spec.js index 5e99c20913..5735c76aa0 100644 --- a/common/static/common/js/spec/discussion/view/discussion_thread_view_spec.js +++ b/common/static/common/js/spec/discussion/view/discussion_thread_view_spec.js @@ -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() { diff --git a/common/static/common/js/spec/discussion/view/thread_response_view_spec.js b/common/static/common/js/spec/discussion/view/thread_response_view_spec.js index 9ae29752da..f6c0601cda 100644 --- a/common/static/common/js/spec/discussion/view/thread_response_view_spec.js +++ b/common/static/common/js/spec/discussion/view/thread_response_view_spec.js @@ -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(); diff --git a/common/static/common/templates/discussion/thread-edit.underscore b/common/static/common/templates/discussion/thread-edit.underscore index f9996a0298..6ba809e6b7 100644 --- a/common/static/common/templates/discussion/thread-edit.underscore +++ b/common/static/common/templates/discussion/thread-edit.underscore @@ -5,7 +5,7 @@ diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss index 73c4b25cde..24c89e863e 100644 --- a/lms/static/sass/discussion/_mixins.scss +++ b/lms/static/sass/discussion/_mixins.scss @@ -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 { diff --git a/lms/static/sass/discussion/elements/_editor.scss b/lms/static/sass/discussion/elements/_editor.scss index c61bbcbc75..830921dcdf 100644 --- a/lms/static/sass/discussion/elements/_editor.scss +++ b/lms/static/sass/discussion/elements/_editor.scss @@ -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 {