Skip to content

Commit c7d4215

Browse files
johndjamesonjohndjameson
committed
Implement UI updates on comment Ajax operations
1 parent 06ff90c commit c7d4215

3 files changed

Lines changed: 73 additions & 25 deletions

File tree

‎client/javascripts/components/modules/editComment.js‎

Lines changed: 48 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,16 @@
55
//
66
// *************************************
77
//
8-
// @param $element { jQuery object }
9-
// @param className { string }
8+
// @param $element { jQuery object }
9+
// @param $comment { jQuery object }
10+
// @param $form { jQuery object }
11+
// @param $deleteBtn { jQuery object }
12+
// @param $editBtn { jQuery object }
13+
// @param $saveBtn { jQuery object }
14+
// @param $textarea { jQuery object }
15+
// @param hiddenClass { string }
16+
// @param storySlug { string }
17+
// @param token { string }
1018
//
1119
// *************************************
1220

@@ -24,13 +32,16 @@ JS.Modules.EditComment = (function() {
2432

2533
var init = function( options ) {
2634
_settings = $.extend({
27-
$element : $('.js-editComment'),
28-
$form : $('.js-editComment-form'),
29-
$deleteBtn : $('.js-editComment-deleteBtn'),
30-
$saveBtn : $('.js-editComment-saveBtn'),
31-
$textarea : $('.js-editComment-textarea'),
32-
storySlug : window.location.pathname.split('/')[2],
33-
token : $('input[name="_csrf"]').val()
35+
$element : $('.js-editComment'),
36+
$comment : $('.js-editComment-comment'),
37+
$form : $('.js-editComment-form'),
38+
$deleteBtn : $('.js-editComment-deleteBtn'),
39+
$editBtn : $('.js-editComment-editBtn'),
40+
$saveBtn : $('.js-editComment-saveBtn'),
41+
$textarea : $('.js-editComment-textarea'),
42+
hiddenClass : 'is-hidden',
43+
storySlug : window.location.pathname.split('/')[2],
44+
token : $('input[name="_csrf"]').val()
3445
}, options);
3546

3647
_setEventHandlers();
@@ -54,10 +65,17 @@ JS.Modules.EditComment = (function() {
5465
_deleteComment($(this).closest(_settings.$element));
5566
});
5667

68+
// ----- Edit Button ----- //
69+
70+
_settings.$editBtn.on('click', function(event) {
71+
_toggleForm($(this).closest(_settings.$element));
72+
});
73+
5774
// ----- Save Button ----- //
5875

5976
_settings.$saveBtn.on('click', function(event) {
6077
_saveComment($(this).closest(_settings.$element));
78+
_toggleForm($(this).closest(_settings.$element));
6179
});
6280

6381
};
@@ -67,25 +85,27 @@ JS.Modules.EditComment = (function() {
6785
// -------------------------------------
6886

6987
var _deleteComment = function($element) {
70-
var id = $element.data('id'),
71-
body = $element.find(_settings.$textarea).val();
88+
var id = $element.data('id');
7289

7390
$.ajax({
7491
beforeSend : function(xhr) { xhr.setRequestHeader('csrf-token', _settings.token); },
7592
url : '/news/' + _settings.storySlug + '/comment/' + id,
76-
type : 'delete'
93+
type : 'delete',
94+
complete : function() { $element.remove(); }
7795
});
78-
79-
// Ajax to delete
8096
};
8197

8298
// -------------------------------------
8399
// Save Comment
84100
// -------------------------------------
85101

86102
var _saveComment = function($element) {
87-
var id = $element.data('id'),
88-
body = $element.find(_settings.$textarea).val();
103+
var $comment = $element.find(_settings.$comment),
104+
$textarea = $element.find(_settings.$textarea),
105+
body = $textarea.val(),
106+
id = $element.data('id');
107+
108+
$comment.text(body);
89109

90110
$.ajax({
91111
beforeSend : function(xhr) { xhr.setRequestHeader('csrf-token', _settings.token); },
@@ -95,6 +115,18 @@ JS.Modules.EditComment = (function() {
95115
});
96116
}
97117

118+
// ----- Toggle Form ----- //
119+
120+
var _toggleForm = function($element) {
121+
var $comment = $element.find(_settings.$comment),
122+
$editBtn = $element.find(_settings.$editBtn),
123+
$form = $element.find(_settings.$form);
124+
125+
$comment.toggleClass(_settings.hiddenClass);
126+
$editBtn.toggleClass(_settings.hiddenClass);
127+
$form.toggleClass(_settings.hiddenClass);
128+
};
129+
98130
// -------------------------------------
99131
// Public Methods
100132
// -------------------------------------

‎client/stylesheets/foundation/_base.sass‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,13 @@ textarea
7676
// ----- Links ----- //
7777
7878
a, %a
79+
background: 0
80+
border: 0
7981
color: $c-highlight
82+
display: inline
8083
font-weight: $b-fontWeight-semibold
84+
line-height: inherit
85+
padding: 0
8186
text-decoration: none
8287
transition: $b-transition
8388

‎views/news/show.jade‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,20 +43,31 @@ block content
4343

4444
ul.list.list--l.list--divided.list--divided--l.bdrb.mbxl.pbl.js-createComment-list
4545
- for comment in comments
46-
li.list-item(id='comment-' + comment.id data-id=comment.id)
46+
li.list-item.js-editComment(id='comment-' + comment.id data-id=comment.id)
4747
.bucket
4848
.bucket-media
4949
img.thumb(src=comment.avatar_url width=50)
5050
.bucket-content
51-
p.tfh
52-
span.mrs.twb= comment.name
53-
time.tcs.tsi= moment(comment.created_at).format('LL')
54-
p.mbf= comment.body
51+
.split.mbm.tfh
52+
.split-item
53+
.split-cell
54+
span.mrs.twb= comment.name
55+
time.tcs.tsi= moment(comment.created_at).format('LL')
56+
57+
if comment.user_id == user.id
58+
.split-cell
59+
button.link.js-editComment-editBtn Edit
60+
61+
p.mbf.js-editComment-comment= comment.body
62+
5563
if comment.user_id == user.id
56-
a edit // PUT to /news/:slug/comment/:comment_id
57-
a delete // DELETE to /news/:slug/comment/:comment_id
58-
// you'll need to send the token along with requests made
59-
// for edit and delete. It's accessible via `token`.
64+
65+
form.form.js-editComment-form.is-hidden(action='')
66+
textarea.form-input.form-textarea.js-autosize.js-editComment-textarea= comment.body
67+
68+
.has-btn.tar
69+
button.btn.btn--a--bordered.js-editComment-deleteBtn Delete
70+
button.btn.js-editComment-saveBtn Save Changes
6071

6172
else
6273

0 commit comments

Comments
 (0)