Skip to content

Commit ff84b83

Browse files
johndjamesonjohndjameson
committed
Merge pull request #238 from codeschool/ajax_edit_delete
Editing and deleting comments
2 parents e411da0 + 8232806 commit ff84b83

8 files changed

Lines changed: 363 additions & 82 deletions

File tree

‎client/javascripts/components/dispatcher/news/show.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@ JS.Pages.News.Show = function() {
1212
// -------------------------------------
1313

1414
JS.Modules.CreateComment.init();
15+
JS.Modules.EditComment.init();
1516

1617
};

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

Lines changed: 81 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,11 @@
55
//
66
// *************************************
77
//
8-
// @param $element { jQuery object }
9-
// @param className { string }
8+
// @param $element { jQuery object }
9+
// @param $number { jQuery object }
10+
// @param $container { jQuery object }
11+
// @param $emptyContainer { jQuery object }
12+
// @param listClass { string }
1013
//
1114
// *************************************
1215

@@ -53,121 +56,126 @@ JS.Modules.CreateComment = (function() {
5356
};
5457

5558
// -------------------------------------
56-
// Post Comment
57-
// -------------------------------------
58-
59-
var _postComment = function(form) {
60-
var url = form.attr('action');
61-
62-
$.post(url, form.serialize(), function(data) {
63-
var comment = '';
64-
65-
_firstComment = false;
66-
67-
if (_settings.$container.hasClass('is-empty')) {
68-
_firstComment = true;
69-
comment = _addFirstComment(data);
70-
} else {
71-
if (data.comment.isSpam) {
72-
comment = _addModerationComment(data);
73-
} else {
74-
comment = _addRegularComment(data);
75-
}
76-
}
77-
78-
_appendComment(comment);
79-
_updateCommentNumber();
80-
});
81-
};
82-
83-
// -------------------------------------
84-
// Add Moderation Comment
59+
// Append Comment
8560
// -------------------------------------
8661

87-
var _addModerationComment = function(data) {
88-
var comment = '';
89-
90-
comment +=
91-
'<li class="list-item">' +
92-
'<p class="mbf tac tce tsi">Hang tight! Your comment needs to be moderated.</p>' +
93-
'</li>';
62+
var _appendComment = function(comment) {
63+
if (_firstComment) {
64+
_settings.$emptyContainer.remove();
65+
_settings.$list.removeClass('is-hidden');
66+
}
9467

95-
return comment;
68+
_settings.$list.append(comment);
69+
_settings.$element.find('textarea').val('');
9670
};
9771

9872
// -------------------------------------
99-
// Add Regular Comment
73+
// Build Comment
10074
// -------------------------------------
10175

102-
var _addRegularComment = function(data) {
76+
var _buildComment = function(data) {
10377
var comment = '';
10478

10579
comment+=
106-
'<li id="comment-' + data.comment.id + '" class="list-item is-added">' +
80+
'<li id="comment-' + data.comment.id + '" class="list-item is-added js-editComment" data-id="' + data.comment.id + '">' +
10781
'<div class="bucket">' +
10882
'<div class="bucket-media">' +
10983
'<img class="thumb" src="' + data.comment.avatar_url + '" width="50">' +
11084
'</div>' +
11185
'<div class="bucket-content">' +
112-
'<p class="tfh">' +
113-
'<span class="mrs twb">' + data.comment.name + '</span>' +
114-
'<time class="tcs tsi">Today</time>' +
115-
'</p>' +
116-
'<p class="mbf">' + data.comment.body + '</p>' +
86+
'<div class="split mbm tfh">' +
87+
'<div class="split-item">' +
88+
'<div class="split-cell">' +
89+
'<span class="mrs twb">' + data.comment.name + '</span>' +
90+
'<time class="tcs tsi">Today</time>' +
91+
'</div>' +
92+
'<div class="split-cell">' +
93+
'<button class="link js-editComment-editBtn">Edit</button>' +
94+
'</div>' +
95+
'</div>' +
96+
'</div>' +
97+
'<p class="mbf js-editComment-comment">' + data.comment.body + '</p>' +
98+
'<form class="form js-editComment-form is-hidden" action="">' +
99+
'<textarea class="form-input form-textarea js-autosize js-editComment-textarea">' + data.comment.body + '</textarea>' +
100+
'<div class="split split--center">' +
101+
'<div class="split-item">' +
102+
'<div class="split-cell">' +
103+
'<button class="link link--error js-editComment-deleteBtn">Delete</button>' +
104+
'</div>' +
105+
'<div class="split-cell">' +
106+
'<div class="has-btn">' +
107+
'<button class="btn btn--a--bordered js-editComment-cancelBtn">Cancel</button>' +
108+
'<button class="btn js-editComment-saveBtn">Save Changes</button>' +
109+
'</div>' +
110+
'</div>' +
111+
'</div>' +
112+
'</div>' +
113+
'</form>' +
117114
'</div>' +
115+
'</div>' +
118116
'</li>';
119117

120118
return comment;
121119
};
122120

123121
// -------------------------------------
124-
// Add First Comment
122+
// Build Moderation Comment
125123
// -------------------------------------
126124

127-
var _addFirstComment = function(data) {
125+
var _buildModerationComment = function(data) {
128126
var comment = '';
129127

130-
comment+=
131-
'<li id="comment-' + data.comment.id + '" class="list-item is-added">' +
132-
'<div class="bucket">' +
133-
'<div class="bucket-media">' +
134-
'<img class="thumb" src="' + data.comment.avatar_url + '" width="50">' +
135-
'</div>' +
136-
'<div class="bucket-content">' +
137-
'<p class="tfh">' +
138-
'<span class="mrs twb">' + data.comment.name + '</span>' +
139-
'<time class="tcs tsi">Today</time>' +
140-
'</p>' +
141-
'<p class="mbf">' + data.comment.body + '</p>' +
142-
'</div>' +
143-
'</li>';
128+
comment +=
129+
'<li class="list-item">' +
130+
'<p class="mbf tac tce tsi">Hang tight! Your comment needs to be moderated.</p>' +
131+
'</li>';
144132

145133
return comment;
146134
};
147135

148136
// -------------------------------------
149-
// Append Comment
137+
// Post Comment
150138
// -------------------------------------
151139

152-
var _appendComment = function(comment) {
153-
if (_firstComment) {
154-
_settings.$emptyContainer.remove();
155-
_settings.$list.removeClass('is-hidden');
156-
}
140+
var _postComment = function(form) {
141+
var url = form.attr('action');
157142

158-
_settings.$list.append(comment);
159-
_settings.$element.find('textarea').val('');
143+
$.post(url, form.serialize(), function(data) {
144+
var comment = '';
145+
146+
_firstComment = false;
147+
148+
if (_settings.$container.hasClass('is-empty')) {
149+
_firstComment = true;
150+
comment = _buildComment(data);
151+
} else {
152+
if (data.comment.isSpam) {
153+
comment = _buildModerationComment(data);
154+
} else {
155+
comment = _buildComment(data);
156+
}
157+
}
158+
159+
_appendComment(comment);
160+
_updateCommentNumber();
161+
JS.Modules.EditComment.init();
162+
});
160163
};
161164

162165
// -------------------------------------
163166
// Update Comment Number
164167
// -------------------------------------
165168

166169
var _updateCommentNumber = function() {
167-
var number = _settings.$number.text().split(' ')[0];
170+
var number = parseInt(_settings.$number.first().text(), 10);
168171

169172
number++;
170-
_settings.$number.text(number + ' Comments');
173+
174+
if (number === 1) {
175+
_settings.$number.text(number + ' Comment');
176+
} else {
177+
_settings.$number.text(number + ' Comments');
178+
}
171179
};
172180

173181
// -------------------------------------

0 commit comments

Comments
 (0)